コーディングする上で必要不可欠なもの、それは【デザイン】…。
毎回、洗練されたデザインを作ってくれるWebデザイナーの皆さんには頭が上がりません。
しかし、いざコーディングするぞ！と意気込んで始めたはいいものの、「え、これどうするんだ？」となってしまうデザインがあったりなかったり、はたまたあったりするのが世の常…。
エンジニアたるもの、何とかしてコーディングで実現したいと思うものですが（思うよね？）、悲しいかな現実は非情なもので、この話題にはいろいろな課題があるのです。
今回は、そんな「カッコいいんだけど難しい…どうしたらええねん！」状態をどう解決していくのかについて触れていきたいと思います。
「難しい」にもいろいろある？
一言に「難しい」と言っても、理由や原因は様々です。
単に再現が難しいというだけであれば、それはコーダーのスキル不足である事がほとんどですから、エンジニアは頑張って力をつけましょうで終わりです。
では、それ以外の「難しい」って、いったいどんなパターンがあるのでしょうか？
① レスポンシブ対応が難しい
作図を含んだデザインや、タイムラインを伴ったデザインなどで起こりがちなパターンです。
デザインのアートボードと同じサイズの時の形を再現することは難しくないですが、それ以外の幅になった時、すなわちレスポンシブ対応する時の難易度が非常に高いという問題があります。
崩れて見えないという事態は避けたいものの、端末のサイズが多様化している昨今では、デザインが複雑であればあるほど全ての画面で崩れないようにするというのは骨が折れる作業です。
絶対位置での指定なんかを多用した日には、崩れないようにするだけで年が明けるかもしれません（大袈裟）
こうして、レスポンシブ対応が難しいデザインは１枚画像として書き出され、世に公開されていくのです。
② 内容の変更に対応できない
ヘッダーやフッターを始め、コンテンツ内のリストやメニューなどで起こりやすいパターンです。
文字で説明するのが難しいので、実際にサンプルを見ていただきましょう。
※1行に4つメニューが入る事を想定した例で進めていきます。
よくある例
上記の配置は、よくあるメニューの配置の際の形をイメージしたものです。（作りが簡素すぎてスイマセン）
下線はそれぞれの要素の幅を表していて、テキスト量に関わらず全ての要素の幅が一定ですね。
このパターンの場合、例えばメニューが増えて2行になった時…
このように、2行になっても全ての幅が均一で、綺麗に配置されます。
難しい例
こちらは、内容の変更があった際に対応できない例です。
一見、全ての要素が均等に間隔が空いていて、テキストに応じた幅になっているし左も右も端に揃っていて綺麗に見えますね。
しかし、先ほどと同じようにメニューが増えて2行になった時、Web上だとどうなるかというと…
こうなります。
1行目の幅に合わせて、同じ列になる要素の幅が固定されてしまいます。
1行目よりも文字数が少なければいいですが、1文字でも多くなると、2行目2列目のように段落ちします。
本来であればテキストを変えるだけで済むはずが、内容に変更があった際に要素の幅の調整から入り、全ての列で崩れないように左右との余白等を調整しなければならないのです。
再現は難しくないものの、メンテナンス性が著しく低下するため、エンジニアはこのようなパターンを見ると苦い顔をします。
LPならまだしも、一つのサイトを作る場合はなるべく回避したいところですよね。
このように、Webデザインは見た目も大事ですが、それ以上に機能性も大事なのです。
Webサイトは「使う人」がいて、「運用する人」がいます。
使いづらいサイトであれば「使う人」は減り、メンテナンス性が悪いサイトであれば「運用する人」が苦労するという点も考慮した上で、どちらにもフレンドリーなサイトを作るよう心掛けていきたいですね。
更に…
テキストが増えて2行になった時、と書きましたが、ここでもまた一つ注意すべきポイントがあります。
それは行間です。
今、この文章も2行以上の文字量で構成されていますが、行と行の間に良い具合にスペースが空いているので読みやすくなっていますよね。
しかしながら、行間の設定がないとギチギチに詰まって見えてしまう何てことになってしまいます。
地味ですが、重要なポイントなので行間も忘れないよう、考慮して作っていきましょう。
③ PC版デザインとスマホ版デザインで配置が全く違う
上記の2つと比べるとあまり見ないですが、油断したころにやってくるパターンです。
PC版のデザインでは要素がA→B→C→Dの順番で並んでいるのに、スマホ版のデザインではC→A→D→Bの順で並んでいる、みたいな感じです。
任意の順に並びを変えること自体は可能ですが、この手のデザインは得てして「並び順」だけに留まらない、縦横無尽な配置になる事が多いのが現実…。
こうして、エンジニアはposition: absolute;（絶対位置の指定）を付け加える日々を送るのです。
…これだけですと、単純に面倒くさいよねっていうだけの話になってしまうのでもう少し実践的な話をすると、この手のデザインが引き起こすもう一つの問題は、①と同様にレスポンシブ対応が難しくなるという点です。
絶対位置指定でのデザイン再現は、その位置の基準をどこから取るかによって再現性が変わってくるのですが、基準とする要素の幅が可変する場合、再現した画面幅から少しでも変わると途端におかしくなることが多いです。
もちろんそういった問題が起こらずに綺麗に配置・レスポンシブ対応ができる事もありますが、大抵は結果論です。
デザインの段階からそれを見越して作る事ができるデザイナーさんが果たして存在するのか…。
いたら是非、お問い合わせフォームからご連絡ください。
「難しい」を解決するために
では、ここからはぶち当たった「難しい」という壁をどうやって乗り越えていくかを見ていきましょう。
1. デザイナー・エンジニア間で擦り合わせを行う
まず第一に行うのはこれでしょう。
デザイナーからは「どのような意図でそのデザインにしたのか」を確認し、エンジニアからは「どのような理由で実現が難しいのか」を説明します。
その上で、どのような形に落とし込むのが良いかを考えましょう。
どちらかの一方的な意見だけでは解決しないので、お互いに歩み寄ることが大事です。
2. 実際にコーディングしてみる
口頭や文字だけで説明するには限界があります。
なので、一度コーディングしてしまいましょう。した上で実際にどのような問題が発生するのか、まずは自分の目で確かめてみましょう。
懸念してはいたけど、作ってみたら思いの外いい感じに収まって問題も起きなかった、なんてこともあったりします。
問題が起きたら起きたで、実物を見ながらデザイナー・エンジニア間で共有できるので話が進みやすいというのもメリットですね。
筆者はこのパターンで問題が見つかる事が多いです。（デザイン見た時に気付けよって自分でも思いますが…）
もちろん、あらかじめデザインを見た上で指摘できる個所があれば指摘します。しかしながら、見た感じ大丈夫だけどコーディングしてみたら…なんてことは往々にして起こります。
そんな時は、なるべく早い段階でデザイナーに相談し、落としどころを見つけるようにしています。
3. 画像として書き出す
作図が絡むデザインであったり、リンクやロールオーバーアクションがない要素であれば、要素全体を画像として書き出してしまうのも一つの手です。
特にLPでは多用される方法ですが、Webサイト制作においても要所要所で使われています。
コーディングで作ろうとするとどうしても崩れてしまうもの、レスポンシブ対応が難しいものは、画像として書き出す方が綺麗に見えて崩れも起きないので、
デザイン性が重視される要素や、フローなどを正確に見せたい場合等に有効です。
ただし、画像のサイズが大きければ大きいほど容量も重くなり、表示速度などに影響が出る事もあります。
また、画像のサイズの指定によってはレスポンシブ時にぼやけてしまったり、スマホではちょうど良いけどタブレットだと大きすぎる、といった事も起こりますので、画像書き出しの際はそれらの点に注意しながら配置していきましょう。
なぜ「難しい」が起こるのか？
哲学的な見出しですが、実際問題なぜ「難しい」といった事態が起こるのでしょうか？
デザインもコーディングも人が行うものですから、突き詰めればそこに起因すると言えるでしょう。
逆に、人の問題なのでどうとでも解決できると言う事です。
コーダーのスキル不足の場合
コーディングスキルを向上させましょう！ －完－
…というのは冗談ですが、一番の近道はやはり、コーディングスキルを向上させるという一言に尽きます。
この仕事をしているとわからない事っていうのは必ず出てくるものですが、そうなった時に自分で調べて解決策を見つける事ができるかどうか、が重要だと思います。
やり方がわからない、で止まってしまっては意味がありません。わからなければ調べれば良いですし、それでもわからなければ誰かに聞く方が早いですから。
ちなみにトラムでは、15分考えてor調べてもわからなければ誰かに聞く、というルールを設けています。
15分使ってもわからなければ聞いてしまった方が早いですし、それでも解決策が出なければ別の方法を探す事を検討できますよね。
デザイナーの理解度が問題の場合
昨今では、フロントエンドエンジニアはデザインも齧るしWebデザイナーはコードも齧る、という事は増えてきています。
しかしながら、どうしてもそれぞれの専門分野の方に特化してしまう傾向にあります。
それ自体は全く悪いことではなく、むしろ突き詰めた専門性は非常に強みになりますのでどんどん強化していくべきだと思いますが、Web制作はデザイナーもエンジニアも互いに協力しあって進めていくプロジェクトがほとんどです。
その中で、Webに落とし込む形になっていないデザインというのは、エンジニアが泣く理由の一つですね。
ただ、これはほとんどの場合はデザイナーと意思疎通を取って調整していく事で解決可能です。
これらの問題点をデザイナーと共有する事でデザイナーのWebに対する知見を深める事も出来ますし、エンジニアとしてもデザイナーがそのデザインに込めた意図を理解する事で、その意図に沿った上での代替案を提示する事も可能になります。
制作に対する相互理解を業務を通じて深める事ができるため、私はこの問題が起きた時は少なからずチャンスだと思っています。
まとめ
制作に限らず、仕事をする上で「難しい」という壁にぶち当たる事は多々あるでしょう。
そこで大事なのは「難しい」に対していきなり対処できる事ではなく、「調べたり相談したりして、解決まで持っていく」ことだと思います。
その過程で、ディレクター、デザイナー、エンジニア、営業と、他のメンバーを巻き込んでいく事もありますが、それらは必ずプラスになります。
できない事、わからない事ががあっても怯まず、調べて自分なりに答えに落とし込んで、その知見を他のメンバーと共有しながら制作していきましょう。
