第二次世界大戦後の芸術的な動きを起源としたミニマルスタイルは、現代のウェブデザインにおいて再び人気となっています。うまく適用することで、ユーザーの作業を簡略化するのに役立ち、より早いページの読み込みやあらゆるスクリーンサイズへの互換性など、ウェブサイトにとって多くのメリットがあります。 ミニマルスタイルはシンプル過ぎるように見えるかもしれませんが、「少ないことは豊かなこと（英: Less is More）」というモットー以外にも検討したいポイントがいくつかあります。今回は、ミニマルスタイルの原則を学びながら、ウェブサイト制作の実践テクニックをまとめてご紹介します。 詳細は以下から。 ミニマルスタイルのウェブサイトとはどんなもの？ フラットデザインやヒーローイメージ、ハンバーガーメニューなど現在人気のデザイントレンドの多くは、2000年はじめに始まったミニマルスタイルに影響を受けています。

2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？

機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。 今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。 進行状況（英: Progression） ローディング・アニメーション ウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。 シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど

配色とは、他のデザイン要素と同じように、適度に使用することが大切です。最大で3つの色数に抑えることで、より良い結果を得ることができる傾向があります。デザインプロジェクトで色を適用することは、バランスを取ることと深く関係しています。使用する色数が増えれば増えるほど、バランスを取るのがより複雑になります。 色はデザインに心地よい品質を加えるのではなく、補強します。 Pierre Bonnard カラーパレットで決めた以外の色が必要がときは、色彩と色合いをうまく利用することで、異なるデザイントーンを実現できるでしょう。今回は、ウェブサイトの配色を決めるときに覚えておきたい７つのポイントを詳しくご紹介します。 60−30−10ルール このインテリアデザインルールは、いつの時代にも活用できるデザインテクニックで、配色を手軽にまとめるのに役立ちます。60％+ 30％+ 10％の比率は、バランスの良い色

ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・

ウェブサイトで一般的に利用されている白い背景デザインの代わりに、よりモダンなスタイルを試してみませんか。 多くのミニマルスタイルはまだまだ人気で、デザイナーは、白を使う代わりに鮮やかな色と灰色の組み合わせを選ぶようになっています。背景効果には、クールな幾何学模様や、左右非対称のパターン、抽象的なアートなどのテクニックを利用することで、よりクリエイティブな可能性を提案できます。 今回は、2017年のウェブ制作で参考にしたい背景デザインの注目トレンドを、サンプル例と一緒に詳しく見ていきましょう。 詳細は以下から。 01. 写真と合わせた幾何学模様 ヒーローイメージとイラストを使ったデザインは、もっとも人気の高い背景スタイルのひとつです。大きな画像イメージを利用することで、ユーザーへの注目を集めるのに最適です。 多くのケースで、フルサイズの画像イメージをホームページの背景として利用し、文字テキス

ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。 レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。 今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。 サイト設計の手間を

2016年のあいだに公開されたテクスチャ280枚以上をセットに、無料ダウンロードできる素材集 Textured Background Bundle を今回はご紹介します。 デザインの背景を作成することを想定しており、プリント印刷にも対応した高画質の素材なので、アイデアに困ったときに活用してみてはいかがでしょう。 詳細は以下から。 収録数280+枚！商用利用できる高品質な無料テクスチャ素材セット Textured Background Bundle では、4256×2832pxの高画質なテクスチャ素材のみを収録しており、質感の高いウッドや黄金ラメなど合計280枚以上を収録したお得な素材集です。幅広いデザイン制作に利用できるアイテムのひとつと言えるでしょう。 収録されているファイルは、2.5GBを超えた太っ腹な素材となっているので、ダウンロードには多少時間がかかるかもしれません。より豊富なバラ

世界で注目されている現役の敏腕クリエイターが審査に参加した、新しい可能性を感じるアイデアやデザインのWebサイトを決める、Awwwardsの主催する年間アワード Annual Awards 2016が開催中です。 Annual Awards 2016は、6部門（今年のウェブサイトを決める The Site of the Year や、サイトの使いやすさやユーザビリティが完璧なサイトを決める Developer Site of the Year 、新しい技術を利用したユニークさを競う Experimental Innovative Site of the Year、デザイン性だけでなく使い勝手にもこだわるショッピングサイトを決める E-Commerce Site of the Year ）でノミネートが発表されています。 今回はその中でも特に印象的だった、魅力的なウェブサイトをまとめてご紹介

いよいよ2017年。年の初めは、既存のデザインや新しいプロジェクトを見直し、最新のトレンドをフレームワークに組み込む方法について考える絶好の機会と言えます。 機能的なトレンドから配色、タイポグラフィーまで2017年は新しいアイデアと視覚的コンセプトの年になるでしょう。いくつかのデザイントレンドは、すでに利用され始めており、新年のスタートに向けてのデザインインスピレーションになるでしょう。では、ひとつずつ詳しく見ていきましょう。 2016年のWebデザイントレンドはこちらから 2015年のWebデザイントレンドはこちらから 2014年のWebデザイントレンドはこちらから コンテンツ目次 1. グラデーションの利用 2. 音声付き動画ビデオ 3. ビジュアル・リアリティー（VR） 4. ますますパララックスエフェクト 5. 超シンプルなホームページ 6. 新しいナビゲーションメニューの種類 7

Webデザインの世界は、幅広いSVGのサポートやCSSでできる新しいことも増えるなど、今後ますますエキサイティングなものとなるでしょう。2016年のデザイントレンドを振り返りながら、今年のデザイン動向と2017年に向けた新しいデザインアイデアをまとめてご紹介します。 コンテンツ目次 1. 高解像度のビジュアル 2. インタラクティブ・ナビメニュー 3. スプリットスクリーン・レイアウト 4. レトロスタイル 5. より複雑なレイアウト 6. アニメーション&マイクロインタクラション 7. 2017年に期待できるものとは 高解像度のビジュアル 英: High-Definition Visuals ヒーローイメージやフルスクリーンを利用したトレンドは、ビデオ動画や高画質なイメージ写真などさまざまな要素と組み合わせることで、今後もまだまだ続くでしょう。もはや鮮やかな写真イメージはポートフォリオサ

配色は、デザイナーにとってもっとも強力なツールのひとつです。色によって注意を惹くことができたり、雰囲気を整えたり、ユーザーの感情や知覚および行動に影響を与えることができます。 Webやモバイルアプリデザインでは、鮮やかな配色が人気となっています。人が重要な要素に注意を集中させ、デザインをより印象的に仕上げるために、デザイナーは鮮やかな配色を使用しています。 今回は、デザインに鮮やかな配色を使用するための実践的なテクニックをご紹介します。 単色使い 鮮やかな配色を利用するもっとも一般的な方法のひとつが、単色のカラーパレットです。単色カラーパレットは、彩度の異なる色合いの組み合わせから構成されており、視覚的にも魅力的にみせることができます。注目を集めるタイポグラフィーと組み合わせることで、単色カラーパレットは印象に残る体験をつくり出すことができます。 ポイント 白黒デザインのアクセントとして１

ここ数年間でニュースメディアは大変な盛り上がりとなっており、ストーリーテリング（英: Storytelling）と呼ばれる雑誌など出版物のオンライン体験を軸にした、新しい戦略が生まれています。ウェブサイトはリニューアルされ、さまざまなアプリも制作されていることから、ニュースメディアはデザイナーにとってデザインの参考にできる機会にたくさん恵まれています。 この記事では、UIデザイン制作の参考にしたいニュースアプリデザインを集め、各UIのメリットとおすすめポイントをまとめてご紹介します。実際に使われているアプリから、開発中のデザインまでが揃っています。 詳細は以下から。 ニュース系アプリから見る、参考にしたいUIデザインアイデア１０個まとめ Urkanian News Portal Credit: Toma Reznichenko 参考にしたいポイント 通常のニュースメディアでは、コンテンツを

アプリはコンテンツやサービスを提供するために、信用できる主流の方法となっています。しかし、さまざまなサービスが乱立する市場では、どのようなモバイルアプリが役立ち、関連性が高く評価され、ユーザーを楽しませてくれるでしょう。 今回は、本当に素晴らしいモバイルユーザーエクスペリエンスを生み出す鍵となる、7つのUXデザインのヒントを見ていきましょう。 コンテンツ目次 1. ひとつのスクリーンに、ひとつの課題を。 2. 見えないユーザーインターフェース 3. たっぷりの余白スペースを。 4. ナビゲーションはシンプルに。 5. 片手による操作 6. アプリの表示時間を早く。 7. プッシュ通知を賢く使おう。 01. ひとつのスクリーンに、ひとつの課題を。 ユーザーが望む結果を得るために必要な労力をできるだけ軽減しましょう。 アプリのために設計したすべてのスクリーン画面は、それを使っているユーザーが本

2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけばいざという時にも便利です。 今回は、デザインツールを以下のカテゴリーごとに分けています。お気に入りのツールを見つけてみてはいかがでしょう。 コンテンツ目次 1. Web タイポグラフィー関連ツール 2. 配色カラー関連ツール 3. Web ベース CSS 関連ツール 4. レスポンシブ・ウェブデザイン関連ツール 5. ウェブパフォーマンス関連ツール 6. オンラインチェックリスト、ガイド、参考リファレンス 7. 画像イメージ関連ツール & 編集エディター 8. ウェブデザイナー向けお役立ちディレクトリ 8. その他ツール Web タイポグラフィー関連ツール Type Anything ウェブサイトで利用したいフォントを試すこと

ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す

色はどんなデザインにおいても重要な要素です。鮮やかな色合いでも、ミニマルなモノクロデザインでも色の使い方によって、デザイン全体を魅力的に仕上げることができます。 色を使って印象づける方法のひとつとして、デザインに色を重ねるテクニックがあります。具体的には、イメージ写真や動画ビデオに半透明で色の付いたレイヤーを重ねることを指します。このエフェクトによって画像にメッセージを含むことができ、デザインに注目を集めることができます。 今回はウェブサイト制作の参考にしたい、さまざまな色の重ね方について見ていきましょう。 グラデーションを試してみよう。 グラデーションは魅力的なデザインとして再認識されており、カラーオーバーレイとして利用することで、うまく人目を惹くことができます。 特にグラデーションが素敵な理由としては、複数の色を自由に組み合わせできる点です。ここで利用する色にはブランドコンセプトを検討

Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの

Bootstrapなどのフレームワークの登場によって、ウェブサイト制作は以前よりも手軽に、そして身近になってきています。特にデザイントレンドをうまく採用したHTMLテンプレートを利用することで、モバイル端末へのレスポンシブ対応はもちろん、簡単にサイトデザインを作成できるようになっています。 今回は、無料ダウンロードできる新作HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材まとめ Material Design for Bootstrap Google 公式のデザインガイド「マテリアル・デザイン」をコンセプトに、人気フレームワーク B