投稿者: UXPin

このページをご覧になっているということは、私たちのCode-to-DesignのMergeテクノロジーを使って、完全に機能するプロトタイプを作ったことがあるのではないでしょうか。(まだそのステップを踏んでいない場合は、Storybookとの統合を無料でお試しください。)

本記事では、 Storybookデザインシステム を使用することで得られる主なメリットをまとめ、簡単なチュートリアルを作成しました。

 Storybookデザインシステム を、信頼できる唯一の情報源にする

デジタルデザインのプロジェクトは、特に複数の人が同時に複数の仕事をする場合、混乱を招くことがあります。Storybookのデザインシステムは、そのような混沌とした状況を抑制し、関係者全員に信頼できる唯一の情報源を与え、コンポーネントのテストを容易にします。

製品チームのメンバーは、すべての基準を理解しているわけではありませんし、開発段階で必要なものがデザインに含まれているかどうかについて、何度もやりとりをしているかもしれません。このような場合、すべてのナレッジをまとめる必要があります。その上で、全員が同じ方向を向くことができるインタラクティブなデザインシステムが必要です。

Storybookのデザインシステムでは、変更を加えた箇所はすべて自動で更新されます。例えば、ある人が20.2バージョンを持っていて、他の人が21.1バージョン使っているというような問題は発生しません。すべての人に同じ情報を提供できるデジタルデザインシステムを構築することで、そのような混乱を防ぐことができます。

また、Storybookでは、チームメンバーが必要なコンポーネントをこれまで以上に簡単に見つけることができます。コンポーネントファインダーとサイドバーは、検索条件に合った結果を表示します。Googleが使える人は、Storybookのデザインシステムで適切なコンポーネントを見つけることができます。

Storybookのデザインシステムで創造性を刺激する

多くのデザインツールや開発ツールとは異なり、StorybookではUIコンポーネントを構築し、隔離されたサンドボックスでテストすることができます。

そのため、デザインシステムやコンポーネントライブラリの他の部分にダメージを与えることなく、インタラクティブなコンポーネントを作成することができます。

恐れずに、最もクリエイティブなアイデアを追求することができます。ブランドの美観や機能性を高めるユニークなアプローチが見つかるかもしれません。たとえその目標に到達しなくても、挑戦することで何かを傷つけることはありません。

StorybookとMergeの統合で、デザイン開発の不整合を解消

UXPinは、コードベースデザインの大ファンです。UXPinでは、デザイナーと開発者がお互いに対立しているのをよく目にします。問題は、ほとんどの場合、ミスコミュニケーションと単一の情報源の欠如に起因していました。この2つのタイプのプロフェッショナルは共通の言語を持たないため、お互いを理解するのに苦労していました。デザイナーはイメージベースのテクノロジーを扱うのに対し、開発はコードに焦点を当てていました。

Merge は、コードを使わず、ドラッグアンドドロップでデザインできる環境をチームに提供することで問題を解決します。デザイナーは、コンポーネントライブラリを使用して新しい製品を作成し、いくつかの調整を行ってから開発者に送ることができます。開発者はその要素のコードをすでに持っているので、デジタル製品の構築にかかる時間を短縮できます。

アドオンや APIを気にすることなく、Mergeの編集画面またはプロトタイピング環境でStorybookのデザインシステムをお使いいただけます。

驚くべきは、プロトタイプが最終製品と同じように機能することです。Storybookは、テストを非常に簡単にするアトミックコンポーネントの構築に優れています。基本的に、コンポーネントが正しく動作すれば、ユーザーインターフェイスも正しく動作します。

これで、当初のデザインと最終的な製品との間の不整合について考える必要はありません。

StorybookとUXPinの連携方法

いよいよMergeとStorybookを統合するための技術的な作業の説明に入ります。簡単ですのでご安心ください。

※事前にUXPinアカウントをご準備ください。まだお持ちではない方はこちらからトライアルを開始いただけます。

また、Storybookが必要ですが、こちらからインストールできます。個人のStorybookのURLをお持ちの方は、sales@uxpin.comまでご連絡ください。

コンポーネントがある場合は、Storybookにインポートできます。

オープンソースのStorybookをお持ちの場合は、以下の手順に従ってください：

• UXPinのDashboardで新しいプロトタイプを開きます。
• “Design System Libraries “を選択し、”New Library “をクリックします。
• “Import Components from Storybook “を選択します。
• インポートしたいStorubookのURLを貼り付けます。
• これでステップ完了です！

今後、Storybookのデザインシステム上で変更を加えた場合、UXPinでも更新されます。

Storybook統合のメリットをご体験ください

いくつかのデザインツールやプロトタイピングツールには、開発のためにデザインをStorybookに移すことができるアドオンやプラグインがあります。UXPinでは、お客様がすべてをゼロからデザインする必要がないように、逆の方法でこれを行う第一人者になることを決めました。

今すぐStorybookとの連携機能を利用し、コードベースのインタラクティブなコンポーネントを使ったデザインを素早く始めましょう。Storybookとの統合で製品開発がより迅速になるのかご体験ください！

   

気に入った画像や写真を見て、「どうしてこんなに面白くて魅力的なんだろう」と思ったことはありませんか？また、映画やテレビのワンシーンを見たときに、なぜそのシーンに強い感動を覚えるのかと考えたことはありませんか？

それは被写体のせいなのか、それとも作者の遠近法のせいなのか。そうかもしれません。しかし、自分の好きなWebサイトやユーザーインターフェースを思い浮かべてみると、それらがどのように見えるからこそ、楽しんで使うことができるのでしょうか。ウェブページやアプリに使われている色やフォントのせいかもしれません。あるいは、これらの例であなたが反応しているのは、「ネガティブスペース」というものかもしれません。

高度なプロトタイピングとデザインハンドオフのためのエンドツーエンドデザインアプリ、UXPinをお試しください。ウェブサイト、アプリ、ランディングページを数分でデザインできます。無料トライアルはこちらより。

ネガティブスペース とは？

ネガティブスペースとは、わかりやすく言えば、被写体の周りや間にある空間のことです。このブログ記事のテキストを囲む白いスペースや、スタイリッシュなモノクロ写真のモデルの顔の後ろにある黒い背景など、ネガティブスペースはよく見られます。しかし、それだけではなく、ネガティブスペースは被写体にさらなる情報や意味を与えることができます。しかし、それについては後述します：

まず、ネガティブスペースのないデザインとはどのようなものかを見てみましょう。

ネガティブスペース のない世界

子供の頃、「ウォーリーをさがせ」シリーズの絵本に出会ったことがあるかもしれません。何百人ものキャラクターが登場し、賑やかな人混みのシーンが緻密に描かれていますよね。そして、そのシーンのどこかに、被写体であるウォーリーがいるのです。丸い黒眼鏡をかけ、赤と白のストライプの服と帽子が特徴的なその小さな人物を見つけるのに、何時間もかかることもあります。どの絵にも、ネガティブスペースは1つもありません。

もし、私たちのデザインがそうであったとしたら、どうでしょう。この記事を読もうとしたときに、すべての文字や線が互いにぎゅうぎゅう詰めになっていたり、さらに悪いことに、他のブログ記事のテキストで覆われていたりすることを想像してみてください。

また、「ウォーリーをさがせ」のように、すべてのレイアウト要素を詰め込んでデザインされたアプリを使おうとした場合を想像してみてください。このようなデザインのアプリやウェブサイトは、使い物になりません。1990年代のウェブサイトのデザインを覚えている人なら、その理由がわかるはずです。

デザインにおける ネガティブスペース の使い方

ウェブページやアプリのデザインにおいて、ネガティブスペースは重要な役割を担っています。ネガティブスペースを意識的に使うことで、ウェブページやアプリが読みやすくなり、ページやアプリの画面に含まれる重要な要素に、より大きな注目を集めることができます。さらに、ネガティブスペースをうまく使うことで、情報の階層を作ることができ、すべての側面が同時に閲覧者の注意を引くことがなくなります。

考え抜かれた手法では、以下のことを達成しようとします：

• ページやアプリのスキャンしやすさの向上
• 視覚的なヒエラルキーの強化
• ページや画面のさまざまな要素を直感的に結びつける
• 全体的にごちゃごちゃしていない感じ
• 気が散らないようにしながら、ユーザーがコアな機能に集中できるようにする
• ページや画面にスタイルとエレガンスが加わる

大きなスペースと小さなスペースの違い

Webデザインやアプリの画面でネガティブスペースをどのように使うかは、それを小さなスペースに適用するか、大きなスペースに適用するかによっても異なります。

大きな空間

Webページやアプリの画面全体のデザインやレイアウトなど、大きな空間を扱う場合は、全体のコンテンツを見てネガティブスペースを適用する必要があります。自分自身に問いかけるべき質問は次のとおりです：

• ネガティブスペースを使って要素を分離できるか？
• テキストは列に分割する必要があるのか？
• 余白やパディングの大きさはどのくらいにすべきか？
• 画像と画像の間の距離はどのくらいにすべきか？

このような ネガティブスペースは、ユーザーの視覚的な流れに大きく影響します。潜在的な誘導であれ、強い押し出しであれ、注意をむけてほしい場所に導くことができます。

小さなスペース

小さなスペースでは、別の種類のネガティブスペースが必要になります。これには次のようなデザイン要素が含まれます。

• フォント
• 行間
• パラグラフ
• リスト
• ボタン
• アイコン

小さなデザイン要素に割り当てるネガティブスペースは、主にウェブサイトやアプリの画面の全体的なわかりやすさを強調するもので、特にタイポグラフィに関連するネガティブスペースの量は重要です。

ネガティブスペースは、ページや画面上のテキストの読みやすさに直接影響します。テキストの行間に十分なスペースがないと、読みにくくなり、ユーザーにさらなる努力を要求することになります。

ネガティブスペース とは：クリエイティブなネガティブスペース

クリエイティブなネガティブスペースの例として、「ルビンの壺」と呼ばれる画像があります。これは、20世紀初頭にデンマークの心理学者エドガー・ルービンが開発した、目の錯覚を利用した有名な作品です。 

（上記のソースはこちら）

左の画像では、黄色い花瓶が被写体で、白い背景がネガティブな空間になっています。しかし、右のモノクロ画像を見ると、2人の男性の横顔が見えてくるかもしれません。次に、左の写真を見てみましょう。元の画像のネガティブスペースには、同じように2人の男性の顔が写っています。黄色い花瓶が被写体であることに変わりはありませんが、ネガティブスペースがあることで、見る人に新たな情報を伝えることができるのです。

目の錯覚は、コーポレートデザインには関係ないと思っていませんか？しかし、考え直してみてください。フェデックスのロゴを見てみましょう。

（上記のソースはこちら）

EとXの間を見て、何か気づきませんか？それは矢印です。フェデックスの事業内容をサブリミナル的に強化しています。これもネガティブスペースのクリエイティブな使い方の一例です。

UXPinはネガティブスペース 使用の改善に役立ちます。

いかがだったでしょうか？次に新しいデザインを始める際は、ネガティブスペースがデザインやUX（ユーザーエクスペリエンス）に与える影響を覚えておきましょう。UXPinでは、デザインやプロトタイプを作成し、複数のデバイスでプレビューして確認することができます。チームメンバーやビジネスパートナーと連携し、ネガティブスペースの使用に関してフィードバックを得ることができます。UXPinの１４日間の無料トライアルで、次のネガティブスペースを使ったデザインプロジェクトを始めてみましょう。

優れたWebサイトのデザインは、広告であると同時にツールでもあり、多くの機能を果たす必要があります。Webサイトは商品やサービスを販売するだけでなく、顧客を獲得したり、ユーザーを教育したりするツールでもあります。

これらの例はすべてユーザーにサービスを提供するものであり、良いウェブサイトはユーザー中心のデザインから始まります。

UXPinは、Webデザイナーが美しいWebサイトを作成するための強力なコラボレーションデザインツールです。今すぐ14日間の無料トライアルを利用して、UXPinでより良いウェブサイトのデザインを始めましょう。

優れたウェブサイトデザインとは？

優れたウェブデザインは、「このウェブサイトは何のためにあるのか？」と 「誰のためのウェブサイトなのか？」という2つの問いを考えることから始まります。

Who（誰のため）とWhat（何のため）を理解することで、ユーザーに最も貢献できるWebサイトをデザインすることができます。

Webサイトを際立たせるために、デザイナーは創造性を発揮しなければなりませんが、ユーザビリティや実用性を犠牲にしてはいけません。形と機能は紙一重です。訪問者を感動させることはもちろんですが、ユーザーが最終的な目標に簡単にたどり着けるようなウェブデザインでなければなりません。

優れたウェブデザインはどのように結果を出すか

優れたウェブデザインは、コンバージョン率（売上、メール登録など）やSEOなど、複数の指標でパフォーマンスを発揮する必要があります。

そしてさらに難しいのは、15秒でユーザーの注意を引き、コンバージョンへと誘導することです。業界をリードする分析ツール、Crazy Eggによると、15秒はウェブサイトでの平均滞在時間です。

コンテンツ（SEO）にせよ、有料広告にせよ、コンバージョンのためにウェブデザインを最適化することを徹底しなければなりません。ユーザーの注意を即座に引きつけ、問題を素早く解決するための案内を提供しなければなりません。そして、そのためには見栄えもよくなければなりません。

デザイナーは、レスポンシブデザインや、複数のデバイスや画面サイズにわたってウェブサイトがどのように見え、どのように機能するかについても考慮する必要があります。

2021年のベストウェブサイトデザイン10選

私たちは、インターネットを駆使して、2021年のベストWebサイトデザイン10を見つけました。デザイナーがどのようにビジュアルアセット、カラーパレット、タイポグラフィを使用して、創造性を発揮し、ブランドアイデンティティを維持しながら、強力なユーザーエクスペリエンスを提供しているかに注目しました。

また、各ウェブサイトのCTA（コール・トゥ・アクション）や、ユーザーの行動を促すようなデザインについても検討しました。

Fipadoc – France

Fipadocは、フランスのビアリッツで開催される国際映画祭です。このウェブサイトでは、ユーザーの注意を引いてアクションを起こさせるために、特大のサンセリフ体の見出しを使ったユニークなデザインを採用しています。

デザイナーは、重要度の低いCTAには小さなサンセリフのタイポグラフィを使用していますが、リンクを示すためにテキストの右側に小さな四角形を使用しています。Fipadocのウェブサイトにはボタンがないため、すっきりとした美しさがあり、エレガントなアニメーションがユーザーエクスペリエンスを高めています。

Fipadocのウェブサイトは、白と黒のカラーパレットにフルカラーの画像とビデオを組み合わせ、魅力的で没入感のあるユーザー体験を実現しています。これはドキュメンタリーのウェブサイトに最適なウェブデザインです。

Spotify Design – スウェーデン

Spotify Designのウェブサイトは、アートやポップカルチャーが好きな人にとって、絶対に見逃せない逸品です。鮮やかな色と抽象的な形は、ワクワクするような魅力を醸し出していて、見ていて飽きません。

Spotifyのデザインサイトは、Shopifyのグローバルデザインチームがどのようにストリーミングプラットフォームのビジュアルやユーザーインターフェースを作成しているかを知ることができます。

Webデザインは、サンセリフ体の大胆なタイポグラフィと、CTA用の大きな見出しですっきりとしたデザインになっています。Spotify Designでは、ページを読み込むときや、目を引くフッターのEメール登録のようにCTAを強調するときにアニメーションを使用しています。すべての要素とアニメーションには、ウェブサイトを通じてユーザーを誘導するという明確な意図があります。

Slate Milk – アメリカ

Slate Milkは、ラクトースフリーで、プロテインが豊富なチョコレートミルクのブランドです。このブランドのEコマースサイトは、オンブランドのウェブデザインの素晴らしい例です。

デザイナーは、カラー、カスタムアニメーションアイコン、大胆なタイポグラフィでSlate Milkのブランドイメージを完璧に表現しています。ウェブサイトでは、アニメーションを巧みに使い、ユーザーの注意を製品の利点に向けさせています。

Slate Milkの製品ページは、製品そのものに酷似しており、ブランドを高め、ウェブサイトをよりプロフェッショナルなものにしています。このプロフェッショナルな美しさは、ユーザーとの信頼関係を築き、最終的にはコンバージョン率の向上につながります。

HALEYS – アメリカ

 HALEYSは、アメリカの女性が設立したクルエルティフリーのビューティーブランドです。ウェブサイトのトップページは、没入感のあるスクロール効果で、ユーザーをブランドと製品の旅へと誘います。また、モデルの目線がユーザーを「Shop Now」のCTAへと導く、巧みなヒーローイメージを使用しています。

ウェブサイトのカラーパレットは、アースカラーを基調とし、ブランドの持つクルエルティフリーで健全なイメージを引き立てています。また、エレガントなカスタムアイコンを使用することで、ブランドイメージを強化しています。タイポグラフィは、製品に美しくマッチしています。大胆なサンセリフ体に、製品名にはセリフ体のアクセントが付けられています。

また、HALEYS社は、高品質な製品やライフスタイルの画像を使用するという素晴らしい仕事をしています。多様なモデルを起用することで、HALEYSは、あらゆる肌色に対応する製品を備えた包括的なブランドであることを示しています。

Wisr – オーストラリア

Wisrは、オーストラリアの金融サービス会社です。競争の激しい市場の中で、Wisrはウェブデザインを巧みに利用して競合他社との差別化を図っています。

Wisrのホームページは、私たちがこれまで見てきたウェブサイトの中でも最も革新的なデザインのひとつです。ユーザーはアニメーションを見ながら下にスクロールし、関連するCTAとともに会社が提供する商品の断片を読むことができます。瞬時にブランドへの興味と信頼を喚起する、まさに没入感のある体験です。

Wisrは鮮やかな色をいくつか使用していますが、紺色のCTAは常に目立ちます。メニューがフルスクリーンで表示されているので、ユーザーはナビゲーションに集中し、探しているものを正確に見つけることができます。軽快なサンセリフ書体は、ユーザーに明確なメッセージと指示を伝えるのに役立っています。

ユニークなページ遷移と面白いスクロール効果は、パーソナルファイナンスとは思えないほどの面白さと興奮をもたらします。

Krave Jerky – アメリカ

Krave Jerkyのウェブサイトデザインは、ブランドの楽しくエネルギッシュな精神を見事に表現しています。鮮やかな色と目立つCTAにより、ユーザーは楽しくインタラクティブな流れの中でチェックアウトに向かうことができます。

ショップページでは、商品の大きなプラスアイコンと鮮やかなホバーエフェクトが、ユーザーに食欲をそそる複数のフレーバーをカートに入れるよう促します。鮮やかな色は各商品のパッケージを引き立て、ブランド体験を強化しています。

ウェブサイトの大部分では、サンセリフ系のフォントを採用し、商品名やブランド名にはカスタム書体を使用しています。カスタムのバルキーなアイコンは、ウェブデザインにプロフェッショナリズムとオリジナリティを与えるのに役立っています。

Singita – 南アフリカ

Singitaは、”持続可能性、環境に配慮したホスピタリティ、そして地域社会のエンパワーメント “を目指すラグジュアリー・リゾート・グループです。

ウェブサイトは、アースカラーを基調とし、コピーにはライトなサンセリフを、見出しにはエレガントなセリフを使用することで、ブランドのイメージを引き立てています。ホームページでは、ソフトなスクロール効果を利用して、HD画像や動画を用いて、ブランドのストーリーやSingitaのアフリカン・サファリ・エクスペリエンスへの期待を伝えています。

ウェブサイトは、オフホワイトの背景に、ブランドカラーのライトブラウンを使ったダークカラーのテキストをCTAに使用しています。スクロールすると予約フォームが表示され、ユーザーがSingitaのアフリカの数多くのサファリ地を探索し、予約することを促しています。

このウェブサイトは、Singitaの高品質なビジュアルと、美しく整えられた施設との調和がとれた、ラグジュアリーなデザインに仕上がっています。

Au Club Alpin – スイス

Au Club Alpinは、アルプスの美しい景色と重厚な木材を使った豪華な宿泊施設を備えたスイスのリゾートです。デザイナーは、短いビデオクリップと宿泊予約への顕著なコールトゥアクションにより、リゾートの雰囲気を折り目の上で見事に表現しています。

Au Club Alpinのウェブデザインは、白と黒にスレートグレーのアクセントを加え、リゾートのミニマルでラグジュアリーな美しさを表現しています。同時に、大きなボックスに収められたカスタムアイコンで、Au Club Alpinのアクティビティや施設を紹介しています。

ウェブサイトでは、ブランドの無骨でラグジュアリーな美学をサポートするために、ヴィンテージフィルターを使った美しい写真や動画を使用しています。

Superlist – イギリス

Superlistは、”未来の生産性ツールを構築する “イギリスの生産性向上のためのスタートアップです。マウストラッキング効果やスクロールアニメーションを用いた未来的なローディングシーケンスとウェブサイトデザインは、ブランドのイノベーションステートメントを確認するのに役立ちます。

ウェブサイトでは、白地に黒、白地に黒の組み合わせにオレンジのアクセントを加えて、重要な情報やCTAにユーザーを惹きつけています。Superlistのミニマルなサンセリフ書体は、ブランドを補完するとともに、クリーンでプロフェッショナルな美しさを表現しています。

Sneak in Peace – イギリス

Sneak in Peaceは、最新の（そして未発売の）スニーカーを見つけることができるイギリスのプレミアムスニーカー商社です。

クリーンでエレガントなトップページでは、メンズとレディースのスニーカーへのCTAとともに、魅力的なビデオシーケンスとともに注目の商品がフォールドの上に表示されています。洗練されたセリフ体の書体は、Sneak in Peaceがプレミアムスニーカーブランドであることを立証しています。

そのすぐ下には、「近日発売」などの注目のコレクションを掲載し、ユーザーにできるだけ早くショッピングを楽しんでもらえるようにしています。

スッキリとしたレイアウトとオリジナルの商品写真で、Sneak in Peaceがプレミアムで信頼できるブランドであることをアピールしています。また、商品をクリックすると、その商品の詳細と画像がスライドして表示されます。

白と黒を基調としたデザインで、カラーは高画質な商品画像のみとし、高級感を演出しています。

優れたウェブサイトデザインについてのまとめ

この記事で、良いウェブサイトデザインの新鮮なアイデアを得ることができれば幸いです。UXPinでは、複数のキャンバスサイズがプリインストールされているため、美しく完全なレスポンシブWebサイトを簡単にデザインすることができます。

また、キープレス、スクロール、ページロードなど、さまざまなインタラクションを設定し、最終的なWebサイトのパフォーマンスを視覚化することも可能です。

UXPinであなたのウェブサイトデザインを次のレベルへ導きましょう。14日間の無料トライアルで、より良いウェブサイトデザインを始めましょう。

 ハンバーガーメニュー は、見た目にも味があります。今ではほとんどのアプリに搭載されている、デザイン兼ナビゲーションの要素で、3本の横線で構成されています。まるでハンバーガーのようですね。こんな感じです：

目を細めて見ると、Spotifyのロゴに似ていませんか？

UXデザイナーのハンバーガーメニューは、関連する情報を誰もが認識できるフォーマットで保存することで、時間とスペースを節約します。すべての情報が一か所に集まり、誰もがその場所を知っているのです。食堂でメニューを見てどんな料理があるかを知るように、ウェブサイトの訪問者は、ひとつのナビゲーション要素を介して、リンクされたさまざまなセクションにアクセスします。

このアイコンは2010年代半ばに広まったものですが、クラシックなハンバーガーと同様に、UXデザイナーの誰もがこのアイコンについて意見を持っています。画面を広く使えるようになると考えるデザイナーもいれば、情報アーキテクチャの景観を損なうものだと考えるデザイナーもいます。

そもそも ハンバーガーメニュー とは？

ほとんどのアプリやモバイル向けサイトの上部にある3本の線。それが「 ハンバーガーメニュー 」です。80年代初頭、デザイナーのノーム・コックス氏は、情報を伝えるにはリスト形式のほうが簡単だと考え、このアイデアを考案しました。

この説を裏付ける証拠があります：

• 人間は、リストを提示された方が事実をよく覚えています。

• ウェブサイトユーザーの55％はリストを見ています。（70％は箇条書きのリストを見ています）

• リストは、ユーザーの選択プロセスを改善します。

上記のような短いリストであっても、読みやすさを向上させ、コンテンツを消化しやすい「チャンク」に分割します。

しかし、他の調査では異なる結果が出ています。

それは、発見しやすさに関係しています。ウェブサイトの訪問者の中には、リンクがハンバーガーメニューの中に隠されていると見つけられない人がいて、それがクリック率に影響します。また、ハンバーガーメニューを画面の左上に配置すると、クリック率はさらに低下します。これは、多くの人がデバイスをスキャンする際に、中央から右に向かってスキャンするためです。

UX Planetは、「画面の上の方にあるものは、クリックするのではなく、ちらっと見るものだというメッセージが込められている」と述べています。

おそらく最も衝撃的な統計はこれでしょう：45歳以上のインターネットユーザーの48％は、アイコンが何を意味するのかさえ知らないのです。

だから、「ミレニアル世代だけを対象としたデザインを作成してください。それ以外の人は当社のウェブサイトを訪れてはいけませんから」というようなクリエイティブブリーフがない限り、次にハンバーガーを検討するときは、何か違うものを選んだほうがいいでしょう。 

たかが ハンバーガーメニュー 。何が問題なのか？

 ハンバーガーメニュー は、確かにスペースを節約できますし、目に優しいとも言えます。サイドバーにリンクを重ねるのではなく、また、最悪の場合、繁華街の歩道に置かれたゴミ袋のようにホームページの上部に散らばるのでもなく、メニューはすべてを目に触れないようにしてくれるので、メリハリのあるクリエイティブなデザインが可能になります。引き出しの中にすべてのものをきれいに収納するようなものです。

しかし、この「引き出し」の比較が、デザイナーを悩ませることになります。

イケアが何と言おうと、人間が引き出しに物を入れる理由は一つです：

他に置く場所がないからです。

だから、デザイナーの中には、ハンバーガーをメニューに入れない人もいるのです。

あなたが引き出しに入れているものを考えてみてください。次に、棚の上に置いているものを考えてみてください。母の写真を額に入れて引き出しに入れていますか？それとも、ユーザーエクスペリエンスデザインの修士号？みんなに見てもらいたいので、たぶんしないでしょう。

ハンバーガーメニューが示唆しているのは、中に入っているものはあまり重要ではないということです：誰も話したがらない20年前の汚い秘密のように、人目から隠され、カーペットの下に隠されているのです。

「置く場所がないから、ここに置こう」という後付けのメニューに過ぎないと、アンチハンバーガーのデザイナーは考えています。必ずしも悪いデザインではないにしても、怠惰なデザインです。

では、それに代わるものは何でしょう？

ハンバーガーのないメニュー

ハンバーガーメニューに代わるものとして最も人気があるのは、タブでしょう。特にスマートフォンの小さな画面でのアプリのナビゲーションには最適です。確かに、メニュー項目は4つか5つに限られていますが、表示されているものは隠されていないため、より重要な意味を持っています。

UXデザイナー兼ソフトウェアエンジニアのマイケル J. フォーダム氏は、「タブは、アプリをナビゲートするためのよりモダンで便利な方法であり、アプリケーションのコアセクションがユーザーにすぐに見えるようになっています。スペースが気になる場合は、下にスクロールするとタブが消え、上にスクロールすると再び表示される非表示ジェスチャーを実装することができます」

他にはどんなメニューがあるのでしょうか？

フローティングハンバーガー

これもアプリに最適な機能ですが、ユーザーが三本線のアイコンをクリックすると、コンテキストが表示されるようになっています。タブと同様に、リンクはもはや余計なものとは感じられず、画面上でより目立つように配置されています。

スワイプ

Tinderでは、ユーザーは左右にスクロールしてアプリを操作します。しかし、スワイプはページへの連続的なアクセスを可能にするだけなので、店舗のページのようにユーザーがすぐに別のセクションに移動するような状況には適していません。

最終的にはデザイナーが決めること

まだハンバーガーが食べたいという方のために、いくつかのヒントをご紹介します：

• ハンバーガーのサイズを大きくしましょう。訪問者がメニューを見ることができるように、メニューをわかりやすくする。メニューの中にあるリンクは、ウェブサイトのオーナーにとって重要なものです。必ずクリックしてもらいましょう。

• セカンダリーメニューを作る。ハンバーガーに加えて、重要なページへのセカンダリアクセスを用意します。(上記のメニューの代わりになるものを使用してください。)あなたはおそらくごちゃごちゃすることについて懸念をお持ちかもしれませんが、デザイン基盤の他の部分にミニマリストの要素を取り入れることで、これを避けることができます。ぜひ試してみてください

まとめ

UXデザインでハンバーガーメニューに言及することは、ディナーパーティで政治の話を持ち出すようなものです。賛否両論の意見が出るでしょう。デザイナーの中には、ハンバーガーメニューを使うことは犯罪ではなく、非常に効果的なナビゲーションツールであると考える人もいるでしょう。ただ、ハンバーガーの潜在的な欠点を理解し、全体の文脈を考慮し、次の一口を食べる前にUXPinでいくつかの代替案を試してみてください。次にハンバーガーを出すのはいつですか？

UXPinを使用している世界の優秀なデザイナーの仲間入りをしませんか？UXPinは普通のUIデザインやプロトタイピングツールではありません。無料トライアルを開始しましょう。

 アイコンのデザイン は、ユーザーがインターフェイスを操作する際に重要な役割を果たします。UXデザイナーは、アイコンを言葉の代わりに使うことで、すっきりとした、使いやすいユーザーエクスペリエンスを実現することができます。

アイコンセットをデザインすることで、ユーザーにユニークでブランド力のある体験を提供するとともに、親切な指示や説明を提供することができます。

アイコンのデザインには多くの課題があります。デザイナーは、コミュニケーションのためのシンボルとして、形と機能の完璧なバランスを見つけなければなりません。アイコンは、ユーザーに重要なメッセージを伝えると同時に、見た目も美しくなければなりません。

UXPinを使えば、特にチームで作業している場合でも、アイコンのデザインを簡単に行うことができます。14日間の無料トライアルを利用して、次のプロジェクトのために美しいアイコンを作成してみてはいかがでしょうか。

 アイコンデザイン とは

人間は生存中ずっとシンボルを使用してきました。小さくても高度な技術を要するこれらのイラストは、サービス、指示、機能、警告、デザイン、マーケティングなどのための普遍的な言語を提供します。

 アイコンデザイン は、ソフトウェア、ウェブサイト、アプリケーションなどにおいて、プログラム、エンティティ、データ、インタラクション、アクションなどを視覚的に表現するものです。世界中で認識されるアイコンは、世界中のユーザーがウェブサイトやアプリケーションを素早くナビゲートするのに役立ちます。

 アイコンデザイン の歴史を振り返る

グラフィックデザイナーのSusan Kareは、ピクセルアートとモダン アイコンデザイン の先駆者として広く知られています。彼女の仕事は、1980年代初頭にApple社でインターフェイスの要素をデザインし、Appleの書体に貢献したことに始まります。

スーザンは、Appleのアイコンと書体のすべてを方眼紙でデザインした後、Macでピクセル単位ですべてを描きましたが、これは現在の洗練されたUXデザインツールとは全く異なります。1984年には、スーザンはMacPaintの最初のリリースに乗り換え、アイコンのデザインがより簡単になりました。

スーザン・ケアの初期のアイコンには、ハサミ（「カット」）、指（「ペースト」）、絵筆、鉛筆などがあります。

アイコンのデザインプロセス

アイコンのデザインは、プロジェクトに必要なアイコンを特定することから始まります。デザインのすべてのページ、アクション、ナビゲーション、インタラクションをリストアップし、アイコンが必要な場所を特定するのがよい方法です。

アイコンをデザインする際の注意点：

• アイコンはできるだけシンプルに、ディテールを最小限に抑えるようにしてください。多くのアイコンは、24×24ピクセルの世界に存在しています。そのため、ディテールが多すぎると、アイコンが支離滅裂な塊のようになってしまいます。
• また、設定を表すコグや「好き」を表すハートなど、誰もが知っているアイコンについては、無理に新しいものを作ろうとしないでください。アイコンをデザインする際に創造性を発揮することは重要ですが、ユーザー中心のアプローチを維持することも忘れないでください。UXPinでは、ライブラリに用意されているマテリアルデザインのアイコンを自由に使うことができます。
• 統一性は、平均的なアイコンセットと優れたアイコンセットを分けるものです。チームで作業している場合、全員が従うべきガイドラインを作成する必要があります。例えば、すべてのストロークのコーナー半径を5pxにするなどです。
• また、プロジェクトのデザインシステムに準拠しながら、ブランド力のあるアイコンを作る必要があります。

アイコンはサイズが小さいため、一見シンプルなデザインに見えます。しかし、上記のようなことを考慮すると、専門的になり、多くのことを考えなければなりません。

 アイコンデザイン の一貫性

アイコンをデザインする際に、一貫性を保つことは、特にチームで作業する場合には難しいことです。

まずは、グリッドを決めることから始めましょう。常に1pxのグリッドを使用すると、キャンバスに最適なビジュアルリファレンスを得ることができます。

次に、8の倍数でデザインするのか、10の倍数でデザインするのかを決めなければなりません。ほとんどのアイコンセットは8の倍数で、サイズは16、24、32、40、48などとなっています。

一貫性を保つために、すべてのアイコンをデザインする際の基本サイズをどの倍数にするかを決めてください。例えば、512ピクセルでデザインする場合は、すべてのアイコンを512でデザインし、その後、サイズを拡大または縮小します。

デザイナーによっては、プロジェクトに必要な最大のサイズから始めて、必要に応じて縮小していくことを好む人もいます。ストロークを追加するよりも、削除する方が簡単な場合が多いです。

ピクセル単位で

一貫性を保つコツのひとつは、”オンピクセル “であることです。子供が線に沿って色を塗るように、アイコンのすべてのストロークはグリッドラインをまたぐのではなく、その内側に収めるようにします。グリッドラインをまたぐ必要がある場合は、オンピクセルの美しさを維持するためにストロークを中央に配置します。

ピクセル単位で維持することで、アイコンを拡大・縮小しても、きれいで一貫性のある状態を保つことができます。また、アイコンセット全体の統一感を保つのにも最適な方法です。

塗りつぶすかどうか

アイコンがストローク（ラインやアウトラインと呼ばれることもあります）なのか、フィル（塗りつぶし）なのか、あるいは両方のバリエーションを持つアイコンセットなのかということも、わかりやすさと一貫性のために考慮すべき点です。多くの場合、アイコンがストロークとフィルのどちらのデザインを採用するかは、ブランディングが重要な役割を果たします。

ストロークのアイコンは細部を表現するのに適していますが、フィルのアイコンはより大胆で、ユーザーにより明確な印象を与えます。

テクニカルルール

アイコンセットの一貫性を保つために、ストローク、シェイプ、コーナー、カーブ、アングルは数学的に正確でなければなりません。手描きの美しさを追求している場合でも、フリーハンドではなく数字にこだわることで、アイコンの統一感を保つことができます。

例えば、アイコンの端は丸いのか四角いのか。例えば、端が丸いのか四角いのか、整数刻みなのか小数刻みなのか。縦と横の比率はどうなっていますか？角度の単位は何ですか？

他のデザインシステムと同様に、技術的なルールは、アイコンセットの成長とともに進化していきます。小さなアイコンセットであっても、詳細なドキュメントを作成しておけば、あなたとあなたのチームが一貫性を保つことができます。また、これらのルールはオンボーディングやハンドオーバーを効率化します。

アイコンのデザインを明確にする

ブランドの創造性をデザインに注入することは重要ですが、アイコンはユーザーにとって意味のあるものでなければなりません。アイコンのデザインは、イラストではなく言語と考えてください。ユーザーにどのようなメッセージを送りたいのか。

例えば、「見る」というアクションがあれば、目のアイコンが最も理にかなっています。カメラや双眼鏡（どちらも「見る」ためのもの）を使うこともできますが、ユーザーがイメージするのは写真を撮ることや観光かもしれません。

このように、ユーザーにとって新しいもの、馴染みのないもののアイコンをデザインする場合は、どうすればメッセージを視覚的に伝えることができるかを研究してみてください。

アイコンのデザインにはルールがある

アイコンのデザインを世界共通の言語としてとらえると、ルールや原則を守ることの重要性がわかります。

誰かに道を教えるとき、手を振るのではなく、行き先を指さすでしょう。アイコンのデザインも同じことが言えます。家のアイコンは常にホームアイコンを意味し、検索は常に虫眼鏡のアイコンであり、ビンのアイコンは常に削除を表します。 GoogleのMaterial Iconsには、標準化されたシンボルの膨大なライブラリが用意されており、行き詰まったときに参照することができます。マテリアルアイコンのバージョンを変更することで、アイコンのセットを普遍的に認識できるようになります。

 アイコンデザイン における色

色を取り入れることで、アイコンのブランド力を維持したり、重要なアクションや機能にユーザーの注意を引くことができます。また、アクティブな状態には異なる色のアイコンを使用することで、ユーザーのナビゲーションを助けることもできます。

2色以上の色を使うと、アイコンが読みづらくなるので注意が必要です。

一般的には、背景とシンボルを別の色にして2色でデザインするのがベストです。64ピクセル以上になると、複数の色や陰影を使ってもディテールを損なわずに表現することができるようになります。

アクセシビリティ

カラーを使用する場合は、プロジェクトの背景と比較して、アイコンのデザインをテストすることをお勧めします。

アイコンは小さくて見づらいため、色を選ぶ際にはアクセシビリティを考慮することが重要です。内蔵されているコントラストチェッカーを使用すれば、視覚障がいのあるユーザーにもアイコンを際立たせることができます。

文化的な意味

アイコンのデザイナーは、異なる文化が色、手振り、シンボルをどのように解釈するかについても考慮する必要があります。特定の市場に向けて製品をデザインする場合、現地の言語や文化を調査することで、ユーザーがアイコンの意味を誤解したり、勘違いしたりするのを防ぐことができます。

ホワイトスペース

ホワイトスペースは、アイコンを読みやすく、アクセシブルにするためにデザイナーが考慮すべきもうひとつの要素です。ホワイトスペースは、ユーザーが視覚的に楽しめるようにバランスを取ってくれます。

また、アイコンは20倍以上の大きさに縮小されることもあるため、デザインの形を維持するためにもホワイトスペースは重要な役割を果たします。

アイコニック…アイコン

at（@）記号は、おそらく現在最も使われているアイコンのひとつでしょう。メールアドレスやソーシャルメディアのタグ付けに使われていますが、その歴史は古く、1300年代初頭、AmenのAを大文字にするために使われていました。その歴史は古く、1,300年代初頭、アーメンのAを大文字にするために使われていたと言われています。

また、ピースサインも誰もが知っているアイコンです。1958年にイギリスで行われた反核デモの際に初めて使われました。ジェラルド・ホルトムがセマフォ・アルファベットのNとD（Nuclear Disarmament）を使ってデザインしたものです。

International Symbol of Access（国際アクセスシンボル）は、車椅子のマークとしてよく知られており、障害者のためのアクセシビリティ機能を表すために、世界中で、またオンラインで使用されています。1968年にデンマークのデザイン学生Susanne Koefedがデザインしました。当初は頭がないデザインでしたが、数年後にはキャラクターの頭を表す円が上部に追加されました。

電源アイコンは、アナログの電源スイッチに見られる「｜」と「O」を組み合わせたものです。デジタル電子機器の出現により、電源スイッチがボタンに変わったため、デザイナーはこの2つのシンボルを組み合わせ、｜を壊れた円（O）の中に入れ子のように配置しました。

UXPinを使ったアイコンのデザイン

UXPinは、アイコンのデザインに最適なツールです。チームを招待してアイコンセットを共同制作したり、内蔵のアイコンライブラリを使用したり、プロジェクトのURLを共有してクライアントがレビューやフィードバックを行えるようにすることができます。

UXPinでは、アイコンのデザインにグリッドを設定することも非常に簡単です。ここでは、UXPinで24ピクセルのアイコンを作成する例をご紹介します。

1. キャンバスを選択するか、カスタムで作成します。この例では、340×720のキャンバスを使用しています。
2. COLUMN GRID（コラムグリッド）を10×コラム、24pxの幅、10pxのガッター、5pxのオフセットに設定します。
3. ベースライングリッドを、オートカラム、24pxの高さ、10pxのガッター、0pxのマージンに設定します。

アイコンのデザインに合わせて、幅と高さを調整してください。ご自身でお試しください 14日間の無料トライアルで、今すぐUXPinで アイコンデザイン を始めましょう。

カラーコントラストチェッカーを使用することで、視覚障害者にとってより魅力的で利用しやすいデザインにすることができます。世界には約3億人の色覚異常者がいます。また、約22億人の人々が視覚に問題を抱えており、デジタル製品の使用が困難になっている可能性があります。

色の組み合わせによるプラスとマイナスの効果を理解することで、ウェブやアプリのデザインをより多くの人に届けることができるようになります。

 カラーコントラスト がデジタル製品をより良くする理由

カラーコントラストチェッカーは、少なくとも2つの重要な点でデジタル製品をより良いものにします。

WCAG 2のガイドラインに沿って製品をよりアクセシブルにする

WCAG 2.1（ウェブコンテンツ・アクセシビリティ・ガイドライン）と成功基準には、幅広い視覚障がい者が製品にアクセスできるようにするためのルールが定められています。

文字色と調和する背景色を使用すると、製品を使用できない人が出てきます。また、色弱の方は、一般的な色とは異なる色を選択した場合、文字や画像が見えにくくなることがあります。

そのような場合には、色を変えるだけで認識しやすくなることがあります：

• ユーザー・インターフェース・コンポーネント
• ウェブページのコンテンツ
• ナビゲーショナル・メニュー
• ロゴマーク

アクセシビリティに配慮したカラーピッカーを使えば、より多くの人に使ってもらえるデザインを簡単に作ることができます。WCAG 2ガイドラインのすべてに準拠したデザインを、内蔵の色覚異常シミュレータやコントラストチェッカーでチェックできます。

このテーマについては、「アクセシビリティについてデザイナーが知っておくべきこと」を読むと、より詳しく知ることができます。この記事では、大きな文字やその他の機能を使用してユーザーを支援する方法について説明しています。

カラーコントラストでより多くのユーザーにアピール

デザインをよりアクセシブルにすることで、より多くの人に製品を使ってもらえるようになります。倫理的には、できるだけ多くの人に製品を使ってもらいたいと思うでしょう。経済的にも、より多くの人に製品を使ってもらうことは、ビジネスの収益向上につながります。

色のコントラストを使うことで、より多くのユーザーを惹きつけることができ、それが広告収入の増加や売り上げの増加につながります。倫理的にもビジネス的にも理にかなっていると思います。

おすすめの読み物: New e-book: Web UI Design for the Human Eye (Colors, Space, Contrast)

WCAGの3つのレベルを知る

WCAGには3つのレベルがあります。最高レベルを目指すことで、デザインを可能な限りアクセシブルにすることができます。

以下の説明では、視覚に基づくアクセシビリティのみを取り上げています。他のアクセシビリティ制限のある人に対応するには、他の機能について考える必要があります。

Level A (Beginner)

色だけに頼らないプレゼンテーションです。

Level AA (Intermediate)

テキストと背景色の間のカラーコントラスト比が4.5対1以上である。

ユーザーインターフェースの構成要素、グラフィックス、および周辺色のコントラスト比が3対1以上である。

文字の大きさが2倍になっても、機能や文脈を損なわない。

Level AAA (Advanced)

テキストと背景の間のカラーコントラスト比が7対1以上である。

カラーコントラストチェックツールのご紹介

色を識別できないような視覚障がいがなければ、カラーコントラストチェッカーを使わなければ、最低限のコントラストに達しているかどうかを確認することはできないでしょう。以下のツールは、より多くの人にとってアクセシビリティが向上する色を選択するのに役立ちます。

カラーコントラストアナライザー (CCA)

Colour Contrast Analyserは、コンピュータにダウンロードできる無料のツールです。16進コードやCSSカラーフォーマットを入力したり、カラーピッカーツールを使ってコントラスト比を求め、AAまたはAAA規格に合格しているかどうかを判断します。

内蔵のコントラストチェックツール 

お使いのデザインツールにコントラストチェッカーが内蔵されているかどうかを確認すると、使用した色を簡単に評価することができます。UXPinでは、それを助けてくれるプラグインを探す必要はありません。エディターの中にすでに備わっているからです。

カラー・コントラスト・チェック

 カラーコントラストチェックは、あなたのデザインがWCAG 2 AAまたはWCAG AAAに準拠しているかどうかを簡単に知ることができます。背景色と前景色の16進数を入力してください。結果として、コントラスト比が表示され、準拠しているかどうかを簡単に「はい」「いいえ」で表示します。

アクセシブルカラージェネレーター

 アクセシブルカラージェネレーターでは、色を16進数で入力したり、カラーパレットを使って入力することができます。入力された色を分析し、AAまたはAAAガイドラインに準拠したコントラストの高い色を、小さい文字サイズ、大きい文字サイズ、通常の文字サイズで提供します。

カラーラボ

カラーラボラトリーツールでは、色を選択して隣り合う色の見え方を確認することができます。また、選択した色を増強して、色弱の人が見るのと同じように見えるようにします。これにより、色弱者が製品をどのように感じるかについて、かなりの洞察を得ることができます。

カラーセーフ

カラーセーフは、WCAGガイドラインに基づいてカラーパレットを生成します。色、テキストサイズ、フォントファミリーを選択すると、WCAG基準に準拠したカラーパレットが作成されます。

APCAコントラスト計算機

APCAコントラスト計算機は、American College Personnel Associationが策定したガイドラインに準拠するように設計されたツールです。APCA Contrast Calculatorの特徴は、シンプルかつフルフォントマトリックスバージョンのツールを提供していることです。文字サイズと色のコントラストがAPCAの基準を満たしているかどうかだけを知りたい場合は、シンプルなバージョンを使用できます。より多くの変数を加えたい場合は、フルフォントマトリックスバージョンをお試しください。

UXPinで適切なカラーコントラストを確保する

UXPinでは、最終製品と同様の外観と性能を持つプロトタイプを作成することができます。そのため、プロトタイピングと製品リリースの段階でカラーコントラストが変わることを心配する必要はありません。

14日間の無料トライアルでは、コントラクトチェッカーを内蔵したエディターやその他多くの機能をお試しいただけます。ご登録はこちらから。クレジットカードは不要です。