【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレンド5個まとめ
はじめにハンバーガーメニューが登場したとき、デザイン業界の反応はさまざまでした。そこから数年が経ったいま、この単純な図形は、インターネットの世界に浸透しています。 ここにくるまでハンバーガーメニューは、特にアニメーションの分野において、新しいレベルの洗練されたスタイルへと進化してきました。CSS3に加えて、SVGやキャンバスは、ユーザーエクスペリエンス全体を高める複雑で、シームレスなコンテンツ遷移を作成するのに利用されています。また、オーディオの利用もより普及してきており、メニューの使いやすさをユーザーに提供しています。 ハンバーガーメニューのレイアウトも、より複雑になってきており、サイトのナビゲーションメニューだけでなく、さまざまなコンテンツを配置しているケースが増えています。 この記事では、2018年以降に増えてきそうなハンバーガーメニューのクリエイティブな最新トレンド5つをご紹介しま
ウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ
機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。 今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。 進行状況（英: Progression） ローディング・アニメーション ウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。 シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど
すべての人に知っておいてほしい、4つのデザイン基本原則とは？
「より優れたビジュアルデザイナーにどうしたらなれますか？」と尋ねられたベテランデザイナーの Jonathan Z. White 。 彼が現在習っている中国語を引き合いに、より優れたデザインを手がけるには基本原則をまず押さえることがいかに重要であるか、実際に活用できるテクニックや簡単な練習方法と一緒に紹介しています。 まずは、ビジュアルデザインを次のレベルに引き上げるためにマスターしたい、いくつかの基本原則を詳しく見ていきましょう。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 基本原則その1 : 書体の基本に戻ろう。 フォントやタイポグラフィーを見れば、デザイナーが何を実現しようとしたのか色々アイデアが巡るでしょう。書体は、デザインの基本といっても良いでしょう。 デザイン全体を書体のみで作成することもでき、選択したフォントに合わせてカスタマイズすることも可能です。デザイン
ウェブサイトの配色を決めるときに覚えておきたい７つのポイントまとめ
配色とは、他のデザイン要素と同じように、適度に使用することが大切です。最大で3つの色数に抑えることで、より良い結果を得ることができる傾向があります。デザインプロジェクトで色を適用することは、バランスを取ることと深く関係しています。使用する色数が増えれば増えるほど、バランスを取るのがより複雑になります。 色はデザインに心地よい品質を加えるのではなく、補強します。 Pierre Bonnard カラーパレットで決めた以外の色が必要がときは、色彩と色合いをうまく利用することで、異なるデザイントーンを実現できるでしょう。今回は、ウェブサイトの配色を決めるときに覚えておきたい７つのポイントを詳しくご紹介します。 60−30−10ルール このインテリアデザインルールは、いつの時代にも活用できるデザインテクニックで、配色を手軽にまとめるのに役立ちます。60％+ 30％+ 10％の比率は、バランスの良い色
モバイルの使いやすさを劇的向上！参考にしたい7つのポイントまとめ
アプリはコンテンツやサービスを提供するために、信用できる主流の方法となっています。しかし、さまざまなサービスが乱立する市場では、どのようなモバイルアプリが役立ち、関連性が高く評価され、ユーザーを楽しませてくれるでしょう。 今回は、本当に素晴らしいモバイルユーザーエクスペリエンスを生み出す鍵となる、7つのUXデザインのヒントを見ていきましょう。 コンテンツ目次 1. ひとつのスクリーンに、ひとつの課題を。 2. 見えないユーザーインターフェース 3. たっぷりの余白スペースを。 4. ナビゲーションはシンプルに。 5. 片手による操作 6. アプリの表示時間を早く。 7. プッシュ通知を賢く使おう。 01. ひとつのスクリーンに、ひとつの課題を。 ユーザーが望む結果を得るために必要な労力をできるだけ軽減しましょう。 アプリのために設計したすべてのスクリーン画面は、それを使っているユーザーが本
スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
Webデザインで白の背景をつかうときのポイント + 参考サイトまとめ
ここ最近のWebデザインを見ていると、真っ白の背景を利用しているサイトを、よく見かけるようになっています。ダーク系やパターンテクスチャなどを利用したデザインから、トレンドはミニマルなデザインに移行しています。 真っ白な背景は、もっとも簡単な利用方法に思えますが、テキストやイメージ画像の選択や、デザイン全体の美的センスを整えたりと、利用の際にはいくつかのポイントがあります。 海外デザインブログDesignModoで、真っ白の背景を利用するときのポイントをまとめたエントリー「Tips on Using White Backgrounds in Website Design」が公開されていたので、今回はご紹介します。 詳細は以下から。 なぜ白の背景を使う？ HTML/CSSのデフォルト設定では、背景に白が適用されていることもあり、もっとも多くのユーザーが利用している、王道カラーでもあります。しか
Appleのデザインテクニックを学ぶ、99個の無料PSDアイコン素材Freshy Icons
世界中での愛され続けているAppleブランドですが、人気のある理由に圧倒的なデザインセンスがあるのではないでしょうか。 iPhoneやiPad、Macbookなど機種本体のエクステリアはもちろん、インターフェースデザインにも相当なこだわりがありますね。 海外ブログMartin Karasekで、appleのUIデザインをモチーフに作成された、99個のアイコンデザインをまとめたPSD素材「Freshy Icons」が公開されていたので、今回はご紹介します。 詳細は以下から。 デザイン制作の参考にしたい、高品質なPSDアイコン素材「Freshy Icons」 ダウンロードできるファイルは、Photoshopで編集可能なPSDファイルとなっています。 ホームページやブログなどで利用する機会の多い、アイコンデザインが99個収録されています。 以下は収録されているアイコンデザインのサンプルとなります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP