こんにちは。佐藤です。

今回はモノトライブのコーディングについて
少し話しをしたいと思います。
※今回はホバーアクションについての内容になります。
スマホの方は申し訳ありませんが、ぜひPCでご覧になってみてください！

 

コーディングって？

担当しているコーディングという工程、そこでのこだわりのお話になります。。
「コーディングってなに？」
という方のためにかんたんに説明すると
例えば、こんなデザインのボタンがあったとします。

この状態では、なにもできませんが
これをコーディングするとこうなります。
↓カーソルで触ってみてください。

矢印が指に変わったり、ボタンの色も変わって
「クリックできそう」
という感じになりました。

このように動きをつけることで
「操作できる」ことを気づかせるアイキャッチになります。

 

他にもwebサイトでは、画像がスライドして切り替わったり
お問い合わせからフォームの送信ができたりしますよね。

そんな感じで動きをつけたり、サイト内の操作ができるように組み立てる工程がコーディングです。

 

Let’s Play!なコーディング

で、せっかく動かすなら、もう少し表情をつけて
気持ちのいい動きにしたいようこだわりたいですね。

例えばさっきのボタンもこんな感じに。

単に色が変わるのではなく、左からスライドしてみました。
文字色や三角の動きも、ふわーっと変わるようにしています。

また、左から右に動きをつけているので
別ページに遷移するというのがイメージができます。

「せっかく動かすならわかりやすく、そして楽しい動きにしたい！」
というのがモノトライブの遊びの部分です。
Let’s Play!ですね。

 

事例の紹介

前置きが長くなりましたが、今回はAC&Mさまのコーポレートサイトについて
紹介させていただきます。
＜AC＆Mさま　実績紹介ページはコチラ＞

ヘッダーを見ると、各コンテンツに行くためのリンクが並んでいます。

すっきりとしたシンプルなデザインがいいですね。

このようにあしらいがない場合は、
「色が変わる」「下線がつく」などの演出が考えられますが
もう少しサイトの特徴やカラーを活かしてみたいと思います。

 

「coconi（ココニ）」という押し出したいサービスのコンセプトに合わせ、
デザインではフキダシがフィーチャーされているのでこれを使いましょう。
デザインのトンマナにも合うのでいいんじゃないでしょうか。

↓ホバーしてみてください。

ホバーすると、フキダシがふわーっと出てきますね
これでもいいのですが、もう少し細かい動きにもこだわってみます。

完成形がこちら

 

解説

フキダシの形をよく見ると、文字が入る枠と尻尾の部分に分解できます。
尻尾の部分は三角形を斜めに変形すれば再現できそうです。

 

パーツに分け、
それぞれのパーツに細かい動きをつけてあげると
さらに表現力が上がります。

やってみましょう！

 

ポイントは

・四角は出現しながら角丸
・尻尾は後から「にょき」っと生えてくる

 

上記のポイントを踏まえて、もう一度完成版を見てみてください。

どうでしょう？
比べて見るとより表情豊かになったと思います。
ふわーっと出てくるだけより、ちょっとだけいい感じじゃないですか？

 

わかりやすいように、大きくゆっくり動くバージョンを用意してみました。

どうですか？

 

ふだん何気なく、意識せずに見ていると気づきにくいかもしれませんが
こういった細かい表現の積み重ねが、サイト全体の気持ちよさになると思いながら
コーディングしています。
多少、自己満足な部分もありますが。

 

デザイナーが1pxにこだわるように
コーディングにもこだわりを持ち続けたいですね。