Webサイトのコーディングにおいて、ユーザーに快適な体験を提供するためには、細かな「違和感」を発見し、改善することが不可欠です。ですが、違和感は見逃されがちで、気づくためには意識的な努力と訓練が必要。まだまだ違和感を感じ取れない場面も多いです。

今回は、実装者として違和感を見抜いて、品質の高いWebサイトを構築するために心がけていることをご紹介します。

1.観察して違和感を探す

コーディングの第一歩は、デザインカンプ通りに実装できているかを確認することです。しかし、それだけでは不十分だと思います。ユーザーがサイトを利用するあらゆるシーンを想定し、細部まで観察することで、違和感の芽を見つけ出します。

私が観察している具体例：

  • 画面幅の変化: レスポンシブデザインでは、ブレークポイント（例: スマホデザインやPC用デザイン）での表示崩れが起こりがちです。これを防ぐため、ブラウザのデベロッパーツールで画面幅を段階的に変更し、デザインの破綻がないか観察します。
  • 画像の違和感: 画像や写真の解像度が低くないか、縦横比が正しく設定されているかを観察します。CMSで入力された画像が、意図しないトリミングがなされていないかなども確認します。
  • ユーザーアクション:ホバーやクリック時のアクションが心地よく・わかりやすいかを観察します。
  • アニメーション：不自然なアニメーション・不要なアニメーションがないかを観察します。

違和感の正体が突き止められない場合は、時間を置いて再度観察するか、デザインならデザイナー、ユーザーアクションや使い方ならディレクターに相談して解決します。
まずは違和感を見逃さないこと。アンテナを張りながら、隅々まで実装したWebサイトを観察しています。

2.フィードバックを活用して違和感に気づく

自分だけでコーディングしていると、細かな違和感に気づきにくいもの。
デザイナー・ディレクターや第三者からのフィードバックは、品質を向上するためのギフトです（もちろん指摘が少ないほうが良いのですが）。

フィードバックの具体例：

  • デザイナーからの指摘：カンプでは違和感がなかったけれど、Webで見ると想定した以上に余白があり、デザインが崩れていました。画面幅が変更されても全体のバランスが崩れないようにデザイナーと相談して修正しました。
  • ディレクターからの指摘：リンクのクリッカブルエリアが狭くて、リンクが押しづらいことがディレクターチェックで発覚。自分ではリンクがどこにあるか知っているので違和感がなかったのですが、初見だとわかりにくいため、クリッカブルエリアを広げました。

フィードバックは「指摘」ではなく「改善のチャンス」と捉え、積極的に取り入れるようにしています。

3.審美眼を磨いて違和感を見極める

違和感に気づくには、審美眼を養うことが欠かせません。審美眼がなければ、どれだけ観察しても「何かがおかしい」と感じるだけで、原因を特定できません。最悪の場合、違和感にさえ気づけません。。。
日常的にデザインに触れ、感性を磨くことで、コーディングの精度を高められます。私が審美眼を養うために実践していることをご紹介いたします。

  • Webサイトの観察を行っています。XでiDIDさんの「今日のサイト」や「今日のパッケージ」をチェックしたり、S5 StyleやSANKOU!さんをはじめとするギャラリーサイト、gsapのShowcaseを見ています。気になるアニメーションはデベロッパーツールでコードを解析します。
  • グラフィックデザインの学習として、お菓子の箱や名刺などレイアウトを観察することで、余白や配色のバランス感覚を磨いています。文字組みを観察することにより、Webサイトのテキスト配置でも注意を払うようになりました。
  • ディズニーなどのアニメを見て、有機的なアニメーションを観察しています。大袈裟だけど違和感のないアニメーションとはどのような動きなのか、気になるアニメーションは繰り返し見て感覚を掴みます。

審美眼を養うために、意識的に「良いデザイン」に触れる時間を確保します。たとえば、毎朝30分、気になるWebサイトやグラフィックを分析し、「なぜこのデザインが心地よいのか」を考えます。単に見るだけでなく、要素（配色、文字、余白、アニメーション）を分解して観察するように心がけています。
また、コーディング中に「何か変だ」と感じたときは、制作中のWebサイトを参考サイトと比較して、どの要素やアニメーションが異なるかを特定します。

私が入社して一番悩んだのが「違和感を感じる」でした。

違和感の正体がわからないから正解がわからない。どう実装して良いか迷う。。。そんな迷いの日々を送っていました。今も迷いの日々は続いていますが、以前よりは迷う回数も減り、どのように解決すればよいかがわかってきたように思います。

AIを活用しても最終的に「決定」するのは審美眼をもった人間だと思います。一朝一夕で身につくものではない「感覚」をこれからもコツコツと養って、違和感に気づける実装者を目指します。
それではまた！