※ 提案作品画像はサンプルです。ご提案4案を作成し、 後述のURLにアップしておりますのでご確認ください。 現行デザインを拝見しまして、大きな改善点は以下であると考えました。 1. 要素数、情報量が過剰 → メニュー項目をドロップダウン化するなどして情報量を抑制 2. キーカラーの赤の印象が強すぎる → ヘッダ色/リンク色のみにキーカラーを採用して赤の印象を抑制 3. アイコン画像のトンマナ一貫性の欠如 → 共通のアイコンファミリーを採用することで一貫性を担保 4. ナビゲーションラベル文言の不一致 → ヘッダメニューの名称とコンテンツエリアのリンク名称を統一 A案） http://heartcore.herokuapp.com/00.html BASIC認証 heart / core 既存レイアウトを踏襲して要素を整理した基本案です。 ヘッダはスクロール固定（position:fixed化）し、画面のどこからでもアクセス可能としました。 左サイドメニューは、2階層目遷移時のメニューサンプルです。 ログインユーザ名とログアウトリンクを統合し、ヘッダ右上にドロップダウン化しました。 キーカラーの赤に若干グラデーションを加えてヘッダ背景色に採用しました。 B案） http://heartcore.herokuapp.com/01.html BASIC認証 heart / core A案をベースに、ヘッダの「管理メニュー」内にグローバルナビゲーションを格納しました。 上部のお知らせ表示とプッシュ通知はサンプル要素です。 C案） http://heartcore.herokuapp.com/02.html BASIC認証 heart / core B案をベースに、「管理メニュー」項目を左サイドに配置しました。 現状は全メニューをクリックで開閉させていますが、 たとえばトップページではすべてリンク化して画面遷移させ、 「閲覧＆編集」階層の画面では「閲覧＆編集」の子要素が開いた状態にする、 現在閲覧中の階層を先頭に配置する （「設定」画面遷移時はトップページの次に「設定」を移動させて開いた状態にする）などの ナビゲーション展開が可能です。 D案） http://heartcore.herokuapp.com/03.html BASIC認証 heart / core C案をベースに、ヘッダ色を白系のグラデーションに抑えた案です。 どうしても赤色の主張が強くなりすぎますので、 リンク色やアクティブ/エラー表示などの強調表現のみに 赤の使用を抑えたほうがよいかと思います。 ナビゲーションUI設計は、サイト構造全体を把握した上で行うべきであり、 トップページだけのご提案では不十分かと思っております。 サイト構造、機能、要件などお伺いした上で、 アプリケーション全体のUI設計やデザインリニューアル、 UIレギュレーション策定などのコンサルティングも可能です。 また、上記のご提案は、拡張性／メンテナンス性を担保するため Twitter Bootstrapベースで構築しております。 UI設計/デザインと併せて主要画面のフロントエンド実装も可能ですので、 よろしければ発注をご検討いただきたく思います。
メンバーからのコメント
※ 提案作品画像はサンプルです。ご提案4案を作成し、
後述のURLにアップしておりますのでご確認ください。
現行デザインを拝見しまして、大きな改善点は以下であると考えました。
1. 要素数、情報量が過剰
→ メニュー項目をドロップダウン化するなどして情報量を抑制
2. キーカラーの赤の印象が強すぎる
→ ヘッダ色/リンク色のみにキーカラーを採用して赤の印象を抑制
3. アイコン画像のトンマナ一貫性の欠如
→ 共通のアイコンファミリーを採用することで一貫性を担保
4. ナビゲーションラベル文言の不一致
→ ヘッダメニューの名称とコンテンツエリアのリンク名称を統一
A案）
http://heartcore.herokuapp.com/00.html
BASIC認証 heart / core
既存レイアウトを踏襲して要素を整理した基本案です。
ヘッダはスクロール固定（position:fixed化）し、画面のどこからでもアクセス可能としました。
左サイドメニューは、2階層目遷移時のメニューサンプルです。
ログインユーザ名とログアウトリンクを統合し、ヘッダ右上にドロップダウン化しました。
キーカラーの赤に若干グラデーションを加えてヘッダ背景色に採用しました。
B案）
http://heartcore.herokuapp.com/01.html
BASIC認証 heart / core
A案をベースに、ヘッダの「管理メニュー」内にグローバルナビゲーションを格納しました。
上部のお知らせ表示とプッシュ通知はサンプル要素です。
C案）
http://heartcore.herokuapp.com/02.html
BASIC認証 heart / core
B案をベースに、「管理メニュー」項目を左サイドに配置しました。
現状は全メニューをクリックで開閉させていますが、
たとえばトップページではすべてリンク化して画面遷移させ、
「閲覧＆編集」階層の画面では「閲覧＆編集」の子要素が開いた状態にする、
現在閲覧中の階層を先頭に配置する
（「設定」画面遷移時はトップページの次に「設定」を移動させて開いた状態にする）などの
ナビゲーション展開が可能です。
D案）
http://heartcore.herokuapp.com/03.html
BASIC認証 heart / core
C案をベースに、ヘッダ色を白系のグラデーションに抑えた案です。
どうしても赤色の主張が強くなりすぎますので、
リンク色やアクティブ/エラー表示などの強調表現のみに
赤の使用を抑えたほうがよいかと思います。
ナビゲーションUI設計は、サイト構造全体を把握した上で行うべきであり、
トップページだけのご提案では不十分かと思っております。
サイト構造、機能、要件などお伺いした上で、
アプリケーション全体のUI設計やデザインリニューアル、
UIレギュレーション策定などのコンサルティングも可能です。
また、上記のご提案は、拡張性／メンテナンス性を担保するため
Twitter Bootstrapベースで構築しております。
UI設計/デザインと併せて主要画面のフロントエンド実装も可能ですので、
よろしければ発注をご検討いただきたく思います。