Ohh!

https://ohh-shop.chicappa.jp/ohhshop/

※まだデスクトップなど大きいウィンドウでしか設定していません
※スマホとかはPCのOKがでないと作成できません
※コンタクトのページはまだできていません
※ハンバーガーボタンの中の一番上にメニューも掲載する予定です

トップページについて

1. アクセスするたびにランダムで画像や配置が変更
2. 画像は上に動きならが横に動きます
3. ロゴやテキストの色は管理画面から自分で変更できる（ロゴの色も変えれるということです）
4. 最初にロゴの中を光が通る（メニューのテキストも）※白く光る
5. 右側のハンバーガーボタン（二本線）をクリックするとインフォと商品が表示
※メニューを配置と、プロダクトの商品をクリックしてカラーミーに飛ばすがまだできてません
6. 5のハンバーガーボタン内の商品にオンマウスで画像が横に動きます

印象について

今回サイトを制作するにあたって感じたのは、ロゴが以前と比べて流線的で、また「Ohh!」というブランドは（違っていたらすみませんが）女性に人気があるブランドなのかなという印象をもともと持っていました。
実際の商品にもカラフルな色展開（蛍光のイメージも強いですし）や落ち着いたトーンのもの、さらに今回いただいた画像のようなナチュラルなイエローや水色など、色の振り幅が非常に豊かであるので、そこをしっかり表現できたらと、まず最初に思いました。

また、関係ないかもしれませんが、「Ohh!」という名前が大西さんのお名前から来ているのかなとも感じていて（何年も聞きそびれてました）、その少しクスッとするような背景も含めて、うまく言えないのですが、そのようなニュアンスを大事にしたいと思いました。
商品説明にも「オー」といった表記があったりすることからも、その印象をデザインの中にも少し取り入れたいと考えています。それが今回デザインした画像の動きにもつながっています。

見せ方について

女性に好まれるブランドなのではという印象があったため、男性的な見え方というよりは、女性が見たときに「かわいい」と感じられることを意識しつつも、可愛いだけではなく、そのバランスには注意しました。その上で、毎回色や配置が変わり、画像が動くような仕掛けは面白いのではないかと考え、デザインに取り入れています。とくに今回のような女性のイラストのフライヤーがゆれながら動くのは面白いと思っています。

サイトの役割と動きの考え方

特にインスタグラム経由での流入が多い現状では、普通のサイトでは記憶に残りにくいため、何かしらの違和感や「おっ」と思わせる要素が必要だと考えています。今の時代は、言い方は良くないかもしれませんが「隙間産業」のように、誰もがやることよりも、誰もやっていないことに価値があると考えているため、その意味でも動きの表現は重要だと考えています。

また現在は、ホームページ単体よりもInstagramやECでの接点が中心になりつつありますが、その中でもブランドとして記憶に残るためには、何かしらの特徴や違和感のある設計が必要だと考えています。そのため、動きの表現や見せ方の変化を重視しました。

あとは僕らしいデザインとして、ローテクに見えてハイテクな感じ、つまりデザイン自体は素朴だけれど、そこに少し動きを加えるという点を常に意識しています。

最初に考えたのがTVが壊れたような動き。ただロゴやイメージとちょっと違うなと思いました。
以前のロゴなら合いそうな気もしましたが。（スピードは調整してですが）

そこから、まずは横に動かすだけの動きを考えました。

正直、こちらの方（横に動くだけの方）が女性的な印象としては良いと感じましたが、全体として綺麗にまとまりすぎる印象もあったため、第一印象で記憶に残ることを優先し、上方向に動く表現を採用しました。上方向への動きについては、あえてわずかな違和感を生むことで印象に残ることを意図しています。
この動きについては好みが分かれる部分でもあり、違和感として感じられる可能性もあると思います。ただ、全体が整いすぎてしまうことの方が、このサイトがよくある一般的なサイトに見えてしまうので、上方向への動きによってあえて違和感を持たせることを優先しています。最終的には僕の判断になりますが、そこは信じていただければと思います。

ただ、この動き自体は有効だと考えているため、ハンバーガーメニューからの展開時や商品のマウスオーバー（スマートフォンでは非対応）として、1回だけ動くものとしては残しています。

また、ロゴに白い光が通る動きについては、一瞬ダサく見える可能性もあるのですが、むしろその違和感も含めて、全体がまとまりすぎないようにする意図もあり、アクセントとして有効だと判断し、採用しています。

管理画面について

画像については、縦・横の両方の比率があるため、特に縦画像は扱いが難しい面がありますが、それを前提に配置の見え方を調整できるように設計しています。
また、縦横によってレイアウトの印象が変わるため、ユーザー自身で選択・追加できる構成にしており、追加した画像はその分そのまま表示される仕様にしています。

表示レイアウト

center : センター（65%）　→　横画像などの時に真ん中に65%で配置
vcenter : 縦画像中央　→　縦画像の時に真ん中に配置（上下綺麗におさまります）
right : 縦画像縮小　→　縦画像の時に縮小して上下隙間を作成
right80 : 右寄せ（80%）　→　横画像の時にウィンドウから80%の大きさで配置（正直いらないかも）
full : フルスクリーン（上下切り抜き）　→　横画像を上下隙間をつけて配置
fullsafe : フルスクリーン（上下左右切り抜き）　→　横画像を下左右切り抜いて配置。
cover : フルスクリーン　→　どんな画像もフルスクリーンにします

ロゴも簡単に色がかえれます。

また、属性というところに番号をいれると、常にそれだけを表示とかも可能です。

トップページは画像に対して、ロゴを変える必要があったので、先ほどのところで変更できるようにしています。
それ以外のページでは違うところで設定するようにしています。

リンクカラーやテキストの色も変更できるようにしています。

ニュースなどの使い方

実際のサイト運用としては、ニュースの更新も必要だと考えています。
正月休みなどの告知も含め、インスタグラムがあるから不要と思われがちですが、更新がされていること自体が「運用されている安心感」につながるため、意外と重要な要素だと感じています。そのため、ある程度の更新は必要だと考えました。

ただ一方で、更新作業の負担もあるため、外部サイトへ遷移できる仕組みも設けています。
投稿機能を利用し、カテゴリーで「LINK」にチェックを入れ、URL欄に遷移先を設定することで、外部サイトへ飛ばすことができる仕様にしています。
この仕組みは他のサイトでもよく採用していますが、実際に評判も良いです。
例えばイベント時なども、遷移先の店舗側で情報がしっかり掲載されていれば、そのままリンクすることでスムーズに誘導が可能です。

画像についても複数枚掲載できるようにしています。Instagramとは異なり、一覧でまとまって見せられる点が強みです。何枚でも追加可能で、特に縦画像は横並びで扱いづらい場合があるため、「ギャラリー」機能を使用しています。
このギャラリーはカラーミーの商品説明でも使用する機能で、簡単に写真を並べることができるため、縦画像との相性が良い仕様になっています。
また、投稿のカテゴリーで「LINK」に設定されたものは一覧には表示されず、それ以外の投稿が表示されるように設計しています。

ここから、また明日に続きます。
本日はここまでご確認ください。