Web Design Trends

Webに関わるすべての人のためのメディア

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が...

【Adobe XD】2019年3月アップデート内容まとめ

Adobeが提供するデザイン・プロトタイピングツールの「Adobe XD」の2019年3月のアップデート内容をまとめました。 今月のアップデートに含まれる注目の変更内容は、下記の通りです。 Illus...

flexboxで左寄せ・中央寄せ・右寄せを指定する方法

CSS FlexboxはWebコーディングのレイアウトを柔軟に作成できるため、様々な場面で使われています。 今回は、CSS Flexboxを使って要素の左寄せ・中央寄せ・右寄せするための指定方法とTi...

2019年2月:最近読んだおすすめのWebデザイン関連書籍

Webデザインを勉強したての頃は色々と本を読んで勉強していたけど、実際にWebデザイナーとして働き始めたらあまり本を読まなくなったという方も多いのではないでしょうか。 デザインのトレンドは常に変化して...

2019年2月:デザインの参考にしたいWebサイト10選

2019年2月に見つけたデザインの優れた魅力的なWebサイトを10個まとめました。 ポップなイメージのWebサイトから、優しい印象のWebサイト、しっかりとした印象のWebサイトなど幅広くご紹介してい...

デザインシステムを正しく理解しよう。作り方・参考事例のまとめ

大規模なデジタルプロダクトをデザインする時や、チームでデザイン制作を行う場合にデザインシステムを活用してデザイン制作を行うことがよくあります。 しかし、デザインシステムという言葉は知っていても、デザイ...

アイソメトリックのイラストを使った魅力的な雰囲気のWebデザイン

アイソメトリックのイラストとは、斜め上からの視点で描かれたイラストのことを指します。(正しい定義は後ほど) 建造物など立体的な物体のイラストを描く時にアイソメトリックが使われる機会が多く、Webデザイ...

【2019年版】Webサイトのファビコンや各種アイコンの正しい設定方法

ファビコン(favicon)や、iOSやAndroidでホーム画面に保存した時に表示される画像、Windows8や10でスタート画面にピン留めした時の画像など、Webサイトでは様々なアイコン画像に関す...

【2019年版】おすすめのWebアイコンフォントと使い方まとめ

Webアイコンフォントを使うことによって、Webサイトに簡単にアイコン素材をデザインに取り入れることができ、デザインの幅が広がります。 一度使ってみるとその便利さに気づくのですが、初めて使う場合には使...

おしゃれな配色パターンが見つかる!配色見本サービスまとめ

配色はデザインにおいて重要な要素の1つですが、優れた配色を作る方法が分からないという方も多いのではないでしょうか。 そこで、今回は初心者の方でも優れた配色ができる配色パターン見本サービスをまとめました...

デザインシステム管理ツール「Specify」のリリースが待ちきれない

大きなサービスやプロダクトになってくると、複数人がデザインに携わるためデザインシステムを構築してチームによるデザイン制作を効率化するのが一般的です。 しかし、デザインシステムの管理は思いのほか手がかか...

配色パターンの参考に!おすすめの書籍9選

デザインにおいて「配色」はとても重要な要素です。配色によってデザイン全体のイメージがガラッと変化します。配色パターンには一定のルールがあり、慣れてくると感覚で配色を決められるようになりますが、コツを掴...

【2019年最新】Webデザインの参考に!おすすめギャラリーサイトまとめ

Webデザインの参考になるギャラリーサイトをまとめました。優れたWebデザインを行うためには、色々なサイトを見てテクニックを身につけていく事がとても重要です。 今回おすすめのギャラリーサイトを選ぶにあ...

2019年版:WebデザイナーにおすすめのChrome拡張機能15個まとめ

みなさんは、Google Chromeの拡張機能をどのくらい使用していますか? Webデザインや、Web制作を行う時に、Chromeの拡張機能を活用することによって作業効率がアップしたり、デザインの参...

Font Awesome 5の使い方とカスタマイズ方法を徹底解説!

Font Awesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富なのでWeb制作の様々な場面で活用することができます。 ただ、CDNを使ったり疑似要素(::befor...

色の持つ効果とは?人に与える影響とデザインへの活用法

普段生活する上で、色が持っている効果や影響を考える機会はほとんど無いかもしれませんが、実は色が人間に与える影響は大きく、無意識のうちに人間の心理に働きかけるような効果を持っています。 これは心理学にお...

デザイン思考とは?問題解決に役立つアイデアを生み出そう

少し前から「デザイン思考」という言葉を耳にする機会が多くなりましたが、デザイン思考についてあまり知らない人も多いのではないでしょうか。 デザイン思考は、ビジネスの場で取り入れることによって問題解決のア...

2019年1月:デザインの参考にしたいWebサイト17選

2019年1月に見つけたWebデザインの参考にしたいWebサイトを集めました。 今月は、シンプルなミニマルデザインから、細かなデザインが凝られた魅力的なWebサイトまで、様々な種類のWebサイトをピッ...

Flexboxが使えるおすすめのCSSフレームワークまとめ

CSS Flexboxとは、CSSによるレイアウトの代表的な手法の1つで、CSS Flexboxを使用することによって、完結なコードで柔軟にレイアウトを組むことができるようになります。 普段CSSフレ...

【2019年最新】おすすめの無料(フリー)画像・写真素材サイト6選【商用利用OK】

著作権の表記不要で商用利用も可能なフリー写真・画像素材を提供するストックフォトサービスの中から、本当に使える6つのサイトに厳選しました。 無料で利用できるフリー写真素材は、Webデザインで気軽に写真素...

【WordPress】おすすめのパーマリンク設定方法【SEO対策にも】

WordPressで投稿ページやカテゴリーページのURLをカスタマイズするには、パーマリンクの設定が必要です。 一見簡単そうに思えるかもしれませんが、SEO最適化や管理を考えると色々なことを考えて設定...

WordPressのサイドバーをカスタマイズして色々なウィジェットを設置する方法

Webサイトやブログを運営する上で、サイドバーに適切に表示を行うことによって訪問者にとって使いやすいサービスを提供することができます。 WordPressには、簡単な設定でサイドバーに様々なカスタマイ...

画面遷移図の作り方とおすすめのツール

Webサイトやサービス仕様の検討段階で必ず登場するのが画面遷移図です。画面遷移図はサービスの全体像を捉えたり、画面間の相互関係を示す時に使われます。 画面遷移図を正しく作ることで、チームメンバーでサー...

2019年版!おすすめのリセットCSSまとめ

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。 分かりやすい例だと、inputタグなどはSafariとChrom...

2019年のトレンド

"いま"読まれている記事

12345...»

© 2019 Web Design Trends