Webサイト・スマートフォンアプリ開発に役立つ

デザインパート別記事一覧

Webサイトやスマートフォンアプリの、具体的な設計ルールやベストプラクティスを解説した記事をピックアップしました。各種UI、情報アーキテクチャ、コンテンツ、ビジュアルなど、デザインするパート別にまとめています。

ナビゲーション設計

情報アーキテクチャ

[post_card slug=”20060925_ia”]
[post_card slug=”20101004_alpha-sorting”]
[post_card slug=”flat-vs-deep-hierarchy”]
[post_card slug=”ia-vs-navigation”]
[post_card slug=”ia-questions-navigation-menus”]
[post_card slug=”audience-based-navigation”]

ナビゲーションメニュー

[post_card slug=”mega-menus-work-well”]
[post_card slug=”20101116_mega-menus-wrong”]
[post_card slug=”minimize-global-navigation”]
[post_card slug=”menu-design”]
[post_card slug=”hamburger-menus”]

リンクテキスト

[post_card slug=”980111″]
[post_card slug=”writing-links”]
[post_card slug=”related-content-pageviews”]
[post_card slug=”link-promise”]
[post_card slug=”learn-more-links”]

モバイルナビゲーション

[post_card slug=”support-mobile-navigation”]
[post_card slug=”mobile-navigation-patterns”]

ページ内リンク

[post_card slug=”20060221_within_page_links”]

インタラクション設計

一覧

[post_card slug=”item-list-view-all”]
[post_card slug=”list-entries”]
[post_card slug=”cards-component”]
[post_card slug=”comparison-tables”]
[post_card slug=”20050711″]

検索

[post_card slug=”20010513″]
[post_card slug=”search-navigation”]
[post_card slug=”applying-filters”]

カルーセル

[post_card slug=”auto-forwarding”]
[post_card slug=”designing-effective-carousels”]
[post_card slug=”horizontal-scrolling”]

アコーディオン

[post_card slug=”accordions-complex-content”]
[post_card slug=”mobile-accordions”]

タブ

[post_card slug=”tabs-used-right”]

モーダルダイアログ

[post_card slug=”needy-design-patterns”]
[post_card slug=”modal-nonmodal-dialog”]

エラーメッセージ

[post_card slug=”20010624″]

入力フォーム設計

入力フォーム全般

[post_card slug=”mobile-input-checklist”]
[post_card slug=”slips”]
[post_card slug=”web-form-design”]

選択肢・ボタン

[post_card slug=”20000416″]
[post_card slug=”drop-down-menus”]
[post_card slug=”20040927″]

テキスト入力欄

[post_card slug=”20090623_passwords”]
[post_card slug=”form-design-placeholders”]

日付指定

[post_card slug=”date-input”]

ユーザー登録・ログインフォーム

[post_card slug=”checklist-registration-login”]

ウィザード

[post_card slug=”wizards”]

コンテンツ設計

テキスト

[post_card slug=”9710a”]
[post_card slug=”20050314″]
[post_card slug=”20060828_search-keywords”]
[post_card slug=”20060417_reading_pattern”]
[post_card slug=”20090302_writing-reuse”]
[post_card slug=”mobile-content”]
[post_card slug=”product-descriptions”]

画像

[post_card slug=”20101101_photo-content”]
[post_card slug=”image-focused-design”]

広告・バナー

[post_card slug=”20041206″]
[post_card slug=”20070820_banner-blindness”]

ビジュアルデザイン

レイアウト

[post_card slug=”20080428_navigation-menu-alignment”]
[post_card slug=”20080527_ok-cancel”]
[post_card slug=”fight-right-rail-blindness”]
[post_card slug=”page-fold-manifesto”]
[post_card slug=”layout-vs-content”]

フラットデザイン

[post_card slug=”flat-design”]
[post_card slug=”flat-design-long-exposure”]
[post_card slug=”young-adults-flat-design”]
[post_card slug=”flat-design-best-practices”]

アイコン

[post_card slug=”icon-usability”]
[post_card slug=”icon-testing”]

リンク・ボタン

[post_card slug=”20080513_link-list-color”]
[post_card slug=”clickable-elements”]

配色

[post_card slug=”low-contrast”]