【16 東邦チタニウム株式会社】なんかすごいことしてそう！

B to Bの企業はサイトってわかりにくいイメージがあったけれど、

ここは直感的にわかる！
「なんかすごいことしてそう！」。

はじめてみたのは、ナビゲーションの項目ひとつひとつに
画像が設定されていること。

ホバーすると文字の色が変わって、画像も薄暗くなる。

わかりやすい…！

デザイン性も高く、見やすさへの工夫もばっちり！

【15 三井住友建設】橋っぽさ、でてる！

信用の濃紺。

建設会社の企業カラーは圧倒的に青が多い。

ヒーローイメージがムービーなのも目をひくけど、

私がおっとなったのは、ヒーローイメージの右上の欠け方、

それから、四角の組み合わせのデザイン。

「もの」「ひと」「はしも、まちも、ひとも。」のところ。

橋っぽさ、でてる！！！！

四角の先が下へ下へ向かわせる、矢印のような効果もある。

ななめパワーを存分に発揮しているように思う。

おもしろいな〜。

【14 ミノン】ちょこん、ちょこんと

ほんわか、かわいい。

真っ黒（#000000)がない。

まじめさや、和の雰囲気のときの他に、

こんな風にやわらかさを出す時も、明朝体の出番なのだな。

淡い色で明朝を使うと、線の細さも手伝ってかわいくなる。

スカルプDのときとちがって、商品もちょこん、ちょこんと

控えめに並べられている。

商品の写真の下に、反射の影が、ごくごくわずかにあったり。

スカルプDは商品写真自体に光をギラッと当ててた。

ドーン、ドーンのスカルプD。

ちょこん、ちょこんとミノン。

比べると面白いな〜。

for-myself.hatenablog.com

【13 ラムネ/森永製菓】単色でポップ。ボタンの動き、まねしたい！！

スーパーかわいい！！！

白地に、まる、さんかく、てんてん…

色は青みどり？水色？の青系のラムネカラーに、

ロゴの赤色。のみ。

「ポップさ≠カラフル」なんだな〜。

森永のHPにブランドサイトはこちらってあって、

このページに飛んだけど、

このページでブランドサイトは完結している。

たった１ページのブランドサイトだけど、

伝えたいことは凝縮されてるんだろうな。

そしてたった１ページでも多言語対応。

世界のラムネ。

おおっとなったのが、ボタンの動き。

ホバーした時に、

①ドロップシャドウ的な影が商品サイトへの下に隠れる

②ボタンの背景がドロップシャドウの色にだんだん変わる

③と同時に、矢印と文字が白くなる

という動きがある。

色だけでこんなに表現できるんだ！

難易度高いのかな？

やり方すら浮かばん…

【12 江戸東京博物館】縦書きナビゲーションで、和！

www.edo-tokyo-museum.or.jp

縦書きナビゲーション！和！

「注目の展覧会」「お知らせ」…見出しも縦書き。

ソースをみてみると、imgで入れている様子。

CSSではむつかしいよね…

白の背景でも、うっすらと和柄が入っているところも。

うっすら、というのがおしゃれの秘密なのだろう。

（がっつり入れたくなっちゃう私は初心者）

多言語、文字サイズの変更にも対応していて、

さすがだなあ、と思った。

直感でわかりやすい作りになってる。

ただ「お問い合わせ」「よくある質問」の２行で

アイコンの四角がつぶれているのは

見栄えがあまりよろしくないように思う。

【11 スカルプD】堂々とした強さを感じる

黒だけど、暗くない！クール。

「LINE UP」「CONTENTS」「NEWS」と

太めのゴシック英字の下に、

ちょこんと添えられたカタカナが親切。

お！でました！

コンテンツのimg、ななめ切り！

堂々とした強さを感じる。

【10 プーシキン美術館展】さすが美術展のサイト。美しい！

pushkin2018.jp

すごい！絵画が踊ってる！

左右にあるドアボタンを押すと、絵画を動かせる。

ポチポチポチポチ…わわわ、たのしい！！

どうやってこの動きをつくるのかな。

ドアのノブも含めて、ファーストビュー全体が

アシンメトリーになっていて、調和がきっちり。

英字のタイトルを縦書き、しかも下から上へ…

おっ？っと、目が止まる。

絵画に溶け込まない黄色と、かちっとした明朝系のフォントで、

上品な感じがする。

美しい…。

調和が美しさの源なのだろうな。