「webデザイン」カテゴリーアーカイブ

Webデザイン100トレース | Hypertext Candy

Webデザイン100トレース | Hypertext Candy

Webデザイン100トレース | Hypertext Candy

こんにちわ!最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデ...

はてなブックマーク - Webデザイン100トレース | Hypertext Candy はてなブックマークに追加

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

webやアプリのUIデザイン上達のコツとして、模写(コピー)がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践!となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバー...

はてなブックマーク - デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note はてなブックマークに追加

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

ネット上にはたくさんのIT系のコンテンツがあふれています。そのほとんどは文章として書かれていますが、一部にはマンガの形で面白く分かりやすくしたものもあります。 ここでは、マンガ化されたITコンテンツを集めてみました。毎年夏の恒例企画、ITまんがの2019年版です。 今年のトピックは新着マンガの1つ目と2つ目で...

はてなブックマーク - 無料で読めるITまんが 2019年版 - Publickey はてなブックマークに追加

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

ネット上にはたくさんのIT系のコンテンツがあふれています。そのほとんどは文章として書かれていますが、一部にはマンガの形で面白く分かりやすくしたものもあります。 ここでは、マンガ化されたITコンテンツを集めてみました。毎年夏の恒例企画、ITまんがの2019年版です。 今年のトピックは新着マンガの1つ目と2つ目で...

はてなブックマーク - 無料で読めるITまんが 2019年版 - Publickey はてなブックマークに追加

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきま...

はてなブックマーク - 最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends はてなブックマークに追加

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホでボタンをどこに配置するとユーザーは操作がしやすいのか? 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons ...

はてなブックマーク - スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス はてなブックマークに追加

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 – Qiita

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita

非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr:http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので...

はてなブックマーク - 非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita はてなブックマークに追加

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neog...

はてなブックマーク - 実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス はてなブックマークに追加

Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note

Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note

Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただ...

はてなブックマーク - Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note はてなブックマークに追加

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ – PhotoshopVIP

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作...

はてなブックマーク - これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP はてなブックマークに追加

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ – PhotoshopVIP

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作...

はてなブックマーク - これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP はてなブックマークに追加

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary

私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初...

はてなブックマーク - PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary はてなブックマークに追加

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary

私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初...

はてなブックマーク - PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary はてなブックマークに追加

Tableauによる最新版『可視化ベストプラクティス』 #tableau | DevelopersIO

Tableauによる最新版『可視化ベストプラクティス』 #tableau | DevelopersIO

Tableauによる最新版『可視化ベストプラクティス』 #tableau | DevelopersIO

先日のブログでも紹介しましたTableau社によるベスト・プラクティス集『Tableau Blueprint』。 当エントリでは、その中から『可視化』の部分にフォーカスを当てたトピック『Visual Best Practices』に関してその内容をまとめて見たいと思います。 Visual Best Practices - Tableau 目次 はじめに ユーザー視点に立って考...

はてなブックマーク - Tableauによる最新版『可視化ベストプラクティス』 #tableau | DevelopersIO はてなブックマークに追加

文字サイズの比率と調和 – シフトブレイン/スタンダードデザインユニット

文字サイズの比率と調和 - シフトブレイン/スタンダードデザインユニット

文字サイズの比率と調和 - シフトブレイン/スタンダードデザインユニット

ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクト...

はてなブックマーク - 文字サイズの比率と調和 - シフトブレイン/スタンダードデザインユニット はてなブックマークに追加

絵心ゼロでもこのレベルよ。ラクガキからリアル画像を生成する「GauGAN」が今すぐ試せます | ギズモード・ジャパン

絵心ゼロでもこのレベルよ。ラクガキからリアル画像を生成する「GauGAN」が今すぐ試せます | ギズモード・ジャパン

絵心ゼロでもこのレベルよ。ラクガキからリアル画像を生成する「GauGAN」が今すぐ試せます | ギズモード・ジャパン

絵心ゼロでもこのレベルよ。ラクガキからリアル画像を生成する「GauGAN」が今すぐ試せます2019.06.19 23:00 小暮ひさのり Image: NVIDIA Research ね?簡単でしょ? 以前こちらの記事で紹介した、NVIDIAのAIアルゴリズムの一種である、敵対的生成ネットワーク(GANs)という技術を利用した自動描き起こしツール「GauGAN」。 ...

はてなブックマーク - 絵心ゼロでもこのレベルよ。ラクガキからリアル画像を生成する「GauGAN」が今すぐ試せます | ギズモード・ジャパン はてなブックマークに追加

驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) – Engadget 日本版

驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) - Engadget 日本版

驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) - Engadget 日本版

iPad Pro + Apple Pencilの組み合わせがヤバい! って話はよく聞きますよね。 でも、Facebookのタイムライン上では、ここまで凄いデジタルイラストを描いたよ! っていうのを今まで見ることがなく、「ふーん」と僕は思っていました。 ですが先日、iPad ProとApple Pencilで凄まじく描き込まれた作品をみて、僕もついに...

はてなブックマーク - 驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) - Engadget 日本版 はてなブックマークに追加

驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) – Engadget 日本版

驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) - Engadget 日本版

驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) - Engadget 日本版

iPad Pro + Apple Pencilの組み合わせがヤバい! って話はよく聞きますよね。 でも、Facebookのタイムライン上では、ここまで凄いデジタルイラストを描いたよ! っていうのを今まで見ることがなく、「ふーん」と僕は思っていました。 ですが先日、iPad ProとApple Pencilで凄まじく描き込まれた作品をみて、僕もついに...

はてなブックマーク - 驚愕の描き込みを見よ!iPad Pro + Apple Pencilは最強の液晶ペンタブレットだった!(世永玲生) - Engadget 日本版 はてなブックマークに追加

ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note

ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note

ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note

お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪...

はてなブックマーク - ブサイクなUIデザインを劇的に改善するための10のチェックリスト|Taiki IKEDA|note はてなブックマークに追加

デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer | コリス

デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer | コリス

デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer | コリス

色の組み合わせに悩んだ時、指定されたカラーをベースにその色の明るい色合いと暗い色合いをはじめ、補色、類似色、分裂補色、3色配色、4色配色など、色の組み合わせを簡単に自動で生成できるオンラインツールを紹介します。 カラーの...記事の続きを読む

はてなブックマーク - デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer | コリス はてなブックマークに追加

複雑な乗換体験を直感的に! 乗換案内アプリのデザイン – Yahoo! JAPAN Tech Blog

複雑な乗換体験を直感的に! 乗換案内アプリのデザイン - Yahoo! JAPAN Tech Blog

複雑な乗換体験を直感的に! 乗換案内アプリのデザイン - Yahoo! JAPAN Tech Blog

デザイン特集2本目の記事です。 Yahoo!乗換案内アプリでデザインを担当している関豪志(せきたけし)です。乗換案内アプリを担当して約6年になりました。この記事では画面設計をする上で心がけたこと、工夫したことを事例とともに紹介します。 Yahoo!乗換案内アプリとは? 行きたい場所へのルート検索はもちろん、電車の...

はてなブックマーク - 複雑な乗換体験を直感的に! 乗換案内アプリのデザイン - Yahoo! JAPAN Tech Blog はてなブックマークに追加

「CS6以降のアプリがいつでもすべて使える」という売り文句のAdobe CCが、事後報告すらなく過去のアプリが使えなくなった件 | Stocker.jp / diary

「CS6以降のアプリがいつでもすべて使える」という売り文句のAdobe CCが、事後報告すらなく過去のアプリが使えなくなった件 | Stocker.jp / diary

「CS6以降のアプリがいつでもすべて使える」という売り文句のAdobe CCが、事後報告すらなく過去のアプリが使えなくなった件 | Stocker.jp / diary

Webデザイン 「CS6以降のアプリがいつでもすべて使える」という売り文句のAdobe CCが、事後報告すらなく過去のアプリが使えなくなった件 Monday, May 13th, 2019 正直タイトルの時点でひどすぎると感じていますし、このような記事を書くのは本望ではないのですが、これを許してはいけない、受け入れるわけにはいかないと...

はてなブックマーク - 「CS6以降のアプリがいつでもすべて使える」という売り文句のAdobe CCが、事後報告すらなく過去のアプリが使えなくなった件 | Stocker.jp / diary はてなブックマークに追加

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをCSSで実装するテクニックを紹介します。 The “ ...記事の続きを読む

はてなブックマーク - 最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス はてなブックマークに追加

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをCSSで実装するテクニックを紹介します。 The “ ...記事の続きを読む

はてなブックマーク - 最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス はてなブックマークに追加

ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ – PhotoshopVIP

ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ - PhotoshopVIP

ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ - PhotoshopVIP

この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょ...

はてなブックマーク - ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ - PhotoshopVIP はてなブックマークに追加

学び方のデザイン – Speaker Deck

学び方のデザイン - Speaker Deck

学び方のデザイン - Speaker Deck

4/23 Goodpatch designers Gymのオフライン会で行われたセッションの内容です。 オンラインサロンをより活用してもらうために、自身の学びの姿勢を客観視してもらい、オンラインサロンがその中でどういう役割を持つのかを意識してもらえるよう。学び方の基本的な「型」を紹介 / 提案しました。

はてなブックマーク - 学び方のデザイン - Speaker Deck はてなブックマークに追加

これは期待!Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli | コリス

これは期待!Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli | コリス

これは期待!Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli | コリス

Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。 CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。 Gimli Gimliはフロン...

はてなブックマーク - これは期待!Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli | コリス はてなブックマークに追加

これだけ守れば見やすくなるデザインの基礎 – Speaker Deck

これだけ守れば見やすくなるデザインの基礎 - Speaker Deck

これだけ守れば見やすくなるデザインの基礎 - Speaker Deck

2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か?デザイナーは何を考えてデザインを作っているのか? という話から、実際にデザインを評価・検討するための言葉を紹介しています。 ご質問はTwitter@kinakoboosterまでお気軽にどうぞ。 https://twitter.com/kinakobooster 株式会社Xe...

はてなブックマーク - これだけ守れば見やすくなるデザインの基礎 - Speaker Deck はてなブックマークに追加

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響 | コリス

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響 | コリス

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響 | コリス

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したもので...

はてなブックマーク - CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響 | コリス はてなブックマークに追加

配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki IKEDA|note

配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki IKEDA|note

配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki IKEDA|note

今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様が...

はてなブックマーク - 配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki IKEDA|note はてなブックマークに追加