- Share
- Pin It
インスピレーション – ウェブサイト例Andrian Valeanu – June 14, 2013 – 6 minutes READ
パンくずはウェブサイトのデザインで非常に重要な要素であり、パンくずのWebサイトには、Webサイトのデザインに使用されます。 そのために、Webデザインにパンくずを実装することができます。 それはあなたのウェブサイトの標準を増大させ、それ故にサイトに視聴者を魅了しています。 基本的に、これらはテキストベースのリンクです。 通常、パンくずのフォントは、ウェブサイト
When のコンテンツの元のテキストサイズよりも小さいいくつかのポイントですあなたのプライムフォーカスでなければなりませんか？ もちろん、サイトの使いやすさです。 教育サイトであれ、eコマースサイトであれ、あるいは情報サイトであれ、Webサイトのユーザビリティの重要性を無視することはできません。 それがeコマースサイトであれば、閲覧者は自分の好みの製品を見つけるのに、困難に直面してはならないのです。 もし、あなたのサイトから関連情報を得るのに時間がかかると感じたら、彼らは躊躇なくサイトを離れ、自分たちにとってより有用な他の競合サイトを見つけるために、再び検索ページに行くでしょう。
パンくずは、その名前が示すように、Web サイトの視聴者がより簡単に目的地に戻れるように、痕跡を残します。 この名前は、童話「ヘンゼルとグレーテル」から取られました。 パンくずは、一般にWebサイトのページ本体の上部、ヘッダーやバナー画像の下、コンテンツの上にあるテキストリンクとして知られています。
たとえば、e コマース ショップがあり、視聴者が冷蔵庫のページにいる場合、パンくずリスト構造には、そのページにつながる主要なカテゴリが表示され、ページの表示順に従ってトップページに戻るようになっています。 つまり、「ホーム>電子機器>家電製品>冷蔵庫」のようなパンくずが表示されます。 このパンくずは、ウェブサイトのバックエンドシステムにある特定のフォルダー構造に基づいているのが一般的です。 ユーザーは、テキストをクリックすることで、トレイルのどのページにも移動することができます。 たとえば、ホームページに移動したい場合、パンくずリスト上の「home」リンクをクリックすることにより、直接そこに移動できます。
パンくずリストは主にナビゲーション メニューとして使用されます。 ユーザーが Web サイトのさまざまなページに移動するには、いくつかの方法があります。 ナビゲーション・メニューは、ユーザーフレンドリーでシンプルでなければなりません。 したがって、パンくずはナビゲーションメニューとして素晴らしいアイデアです。
With Postcards you can create and edit email templates online without any coding skills!
無料でお試しくださいその他の製品
ナビゲーションメニューとしてだけでなく、検索エンジンの最適化にも有効です。 特にeコマースでは、競争が激しいため、検索エンジンで上位に表示されることが重要です。 パンくずはウェブサイトのフォルダ構造に基づいているので、ウェブサイト全体のより多くの場所にキーワードを配置します。 しかし、ブレッドクラムメニューを扱っている間、あなたが心に留めておく必要がある一つのことは、このタイプのナビゲーションは、サイトの魅力を高めるための追加機能として考慮されるべきであり、有用な主要ナビゲーションメニューを置き換えるべきではないということです,モンクレール ダウン。
インターネット上でパンくずメニューのいくつかのタイプを検索すると、位置情報ベース、属性ベース、パス ベースのパンくずナビゲーション メニューを見つけることができます。 質感のあるキャンバスは、全体的な芸術的なデザインとうまく調和しています。 1519>
Order
UI のすべてのアイテムが微妙なグラデーションで示されているのに対し、パンくずは、よりクリーンでフラットな外側とモノクロの背景に固執しています。 しかし、それは他のものと非常によく合い、同様のカラーリングのおかげで美学を補完しています。 ホームボタンは、クラシカルな魅力を添えています。 1519>
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Startup App を試す Slides App を試すその他の製品
Breadcrumbs by Rob Dozier は、非常にエレガントでクリーンかつ新鮮な外観で人を魅了します。 ナビゲーションは淡い色調で作られていますが、それでもまだ目を引きます。 微妙な影が矢印の形をしたボックスに視覚的な重みを与え、騒がしい背景から目立たせています。 現在の位置を明確に示すために、最後のアイテムはシンプルな銘文として表示されます。
Breadcrumbs/Error by Jason Mayo は、ギャップや印象的な機能を持たない合理的なナビゲーション バーです。 それは構成と調和し、UI の不可欠なディテールとなります。 しかし、エンボス加工の効果で救われています。 各ブロックやタイトルに、よりクリアでシャープな外観を与えています。 1519>
Design Fundamentals
Allison House は、古典的な矢印型の詳細をすべて捨て、よりシンプルでエレガントな機能を採用しました。 したがって、このコンポーネントは自然で直感的に見え、プロジェクトに必要とされる強い教育的なスタイルを持っています。 各ブロックには、付随するアイコンによって強化されたタイトルが含まれています。
前の例と同様に、Michal Vasko はタイポグラフィを優先し、グラフィック詳細を捨ててすべてのリンクを一列に並べて配置します。 項目は小さなミニマルな矢印で区切られ、青色によって控えめに方向が示されています。 しかし、この要素はデザインにシームレスに統合されており、グレー色は背景と激しいコントラストで立っていないので、それは簡単に見えなくなることができます。
JomSocial Template
JomSocial Templateは全く別の問題です。 パンくずナビゲーションは、その比較的大きなサイズと明るい色合いのため、視覚的に大きな重みがあります。 ユーザーを圧倒することなく、目を引きつけます。 Mohd Izuddin Helmi 氏は、独特の書体、内側の影、ソリッド ホーム ボタン、およびいくつかの穏やかなグラデーションで操作して、印象的な結果を達成しました。 これは、プロジェクト全体のユーザーの動きを示す最も簡単な方法です。 美しい外観を持たず、多少の装飾が必要ですが、それでも、その役割は十分に果たしています。 タイトル、方向性を示す矢印、さらにはハイライトの色など、すべての一般的な機能が含まれており、それによって、訪問者に実行可能なナビゲーション アシスタントを提供します。 タイポグラフィー、ホワイトスペース、および背景の巧みな作業から得られる、クリーンで詳細な外観を備えています。 最後の項目は、関連するページに注意を向けるために、他の項目とは対照的に太い字体になっています。 1519>
Gamerscouch.com redesign
Aaron Moody は、パンくずが正当な位置を占め、きちんとした、洗練された、流行の外観を持っているウェブサイトのフロントエンドを精力的に制作しています。 ナビゲーションは、全体のデザインを補完し、プロジェクトのムードをつかまえています。
結論
メインメニューをサポートするだけでなく、階層を明らかにし、現在のセクションへのパスを示す任意のナビゲーション補助として、パンくずはユーザー体験を向上させる強力な道具となります。 上記の例は、美しく直感的なパンくずを作成する際にユーザーを刺激し、その使命を果たすだけでなく、デザインにおける「黒い羊」になることはありません。
トップストーリーを購読する。
