BLOG ブログ

コーディングのこだわりのウラガワ(AC&Mさまサイト ボタン編)

ブログ担当:佐藤 雄一(TECHNICAL DIRECTOR,CODER)

こんにちは。佐藤です。

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

 

コーディングって?

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

ボタン

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

ボタン

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

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

 

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

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

 

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

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

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

ボタン

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

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

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

 

事例の紹介

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

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

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

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

 

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

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

ココニ!

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

完成形がこちら

ココニ!

 

解説

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

 

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

やってみましょう!

 

ポイントは

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

 

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

ココニ!

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

 

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

ココニ!

どうですか?

 

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

 

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

 

この記事を書いたのは

TECHNICAL DIRECTOR,CODER

佐藤 雄一

コーダーはこうだ!
コーディングとディレクションを少々。
デザインの雰囲気を大切にしつつ、
「適当にうまいことやって!」に答えます。

佐藤 雄一の他のブログはこちら

佐藤 雄一の実績はこちら

CONTACT

閉じる

お問い合わせ

Let's
03-3555-7760 受付時間は平日10:00~19:00まで

お電話

御社名

{{companyerr}}

ご担当者名

{{nameerr}}

メールアドレス

{{mailerr}}

お電話番号

※差し支えなければご記入ください。担当者から折り返しお電話いたします。

お問い合わせ内容

{{bodyerr}}

モノトライブをどこで知りましたか?

PAGE TOP