食育丸の内

三菱地所の食育プロジェクト「食育丸の内」のサイト。イートアカデミーなどの各種イベントの案内やレポートなどを紹介しています。

茶色系の色をメインで使われているシンプルなデザインですが、トップページのインパクトの強さは大きいですね。jQueryによる動きのあるトップページで、コンテンツが下から次々に上にスクロールされて表示されていく感じは、見ていてとても気持ち良いです。写真などがキレイでたくさん使われているので、サイト全体としては、これぐらいシンプルな方が写真が目立っていいですね。

各コンテンツのトップページは、こんな上感じで表示されています。ここらはとくに動きなどはなく、すっきりとユーザーに見せたい情報をリストのように表示されています。コンテンツトップページなので、ここは目次的な存在でしょう。見やすくて良いですね。

それぞれのコンテンツトップページから移動した後は、こんな↑感じです。写真が大きく使われていて、左にはメインコンテンツのメニュー。右には表示されているコンテンツに関する他コンテンツへのメニューが表示されいています。ユーザビリティーへの意識の高さが伺えます。ただ、よく見るとそれらのことを確認できますが、パッと見ではわかりにくいので、「Contents」や「Archives」などではなく、もう少しわかりやすい名称のタイトルをつけると、より使いやすいサイトになるかもしれませんね。

こちら↑も特集ページのコンテンツ詳細です。ブログのように更新が簡単に設計されていると思いますが、使用する写真の大きさなど統一されているので、とてもスッキリとキレイに見えます。ブログ形式をとると更新が簡単で良いのですが、そこにちょこっと投稿時のルール（写真の大きさや文字数など）を決めてあげると、レイアウト崩れや、サイト全体の雰囲気を壊すことなく、サイトを運営していけるので、良いですね。

こちら↑もコンテンツ詳細ページなのですが、他のページとはデザインが全く異なります。これは、リニューアル前のデザインをそのまま使用されていると思うので、今後デザインが統一されるのではないでしょうか。

とにかく注目したい部分は、トップページのJavaScriptを使用したアイキャッチ効果の高い動きですね。こんなスムーズで楽しい動きなら、何度でもトップページをクリックしてしまいたくなります。

デザインだけではなく、こういう動きをドンドン取り入れて、ユーザーへのサイト満足度を高めることもしていかないといけないですね。ただ、動きを取り入れすぎて、逆にユーザビリティーを下げているサイトもチラホラ見られるので、そうならないようにバランスを考えながら、作りこんでいく必要がありますね。