こんにちは、エンジニアの六川です。
早いもので今年も残すところあと1ヶ月。ここ最近は気温がグッと下がり寒い日が増えてきましたね。
温かいものが飲みたくなる季節ですが、私は自宅で紅茶を淹れることが多くなりました。
というのも、先月誕生日プレゼントとして、スタッフの皆さんから紅茶をいただいたことがきっかけです。普段は気分がシャキッとするコーヒー派なのですが、華やかな香りの紅茶は心がほっと落ち着いて、安らぎのひとときを味わっています。
今回は、エンジニアのお仕事をするうえで、大切にしている思いやこだわりを私なりに3つご紹介したいと思います。弊社の実績記事では、主にサイト制作の経緯やデザインについてをご紹介していますが、エンジニアが携わる実装面での話をお伝えする機会はこれまでそう多くはありませんでした。
そんなウィルスタイルのいちエンジニアとしてのウェブ制作に対する想いをこのブログでお伝えできればと思いますので、気軽にご覧いただけたら嬉しいです。
Table of contents
心地よいアニメーション
「目を引くサイト」というと、一番に思い浮かぶのはインパクトのある動きのサイトではないでしょうか。しかし、それが必ずしも”良いサイト”というわけではありません。ウェブサイトによって目的が異なるので一概には言えませんが、「サイトから適切な情報を得る」という本来の目的を見失わないことが大切だと思います。
その反面、アニメーションをつけることで、デザインの持つ雰囲気やイメージをより印象的に伝えられることもできます。アニメーションについてはまだまだ課題が多い私ですが、勉強すればするほどどこまでも追い求められるものだなと日々感じています。
「さりげないけど心地よい。決して大胆な動きではないけれど印象に残る。」
そんなサイトを目指せるように日々勉強中です。
実例として、私がこれまで携わったサイトの中で、特にアニメーションにこだわったサイトをいくつかご紹介したいと思います。
昭和建装様
大阪府松原市を拠点に、外壁塗装や防水工事などを行われている昭和建装様。
「塗装」というキーワードをもとに、ローディングやスクロール時に”塗り”をイメージしたアニメーションを取り入れています。
株式会社HA-RU様
島根県松江市をはじめに、全国でダクト・保温工事を主とする設備工事を行う株式会社HA-RU様。
キャッチコピーの「いい空気を創る」から、サイト全体の動きに軽やかさをもたせるために、アニメーションのスピードや出現タイミングなどをデザイナーとともに細かな調整を行いました。
尼崎ボクシングジム様
兵庫県尼崎市で、1979年の創立以来100人以上のプロボクサーを育成されてきた尼崎ボクシングジム様。
ボクシングのスピード感のある動きをぐるりと回転するタイトルのアニメーションに。キービジュアル下の文章はスクロールすることで一文字ずつスポットが当たる演出を加え、ひとつひとつの言葉を読ませるための工夫を加えました。
アニメーションはデザイナーから指示をもらって制作することもあれば、エンジニアから動きを提案する場合もあります。サイトのデザインそのものはデザイナーに任せる一方で、このアニメーション部分だけはデザイナーと一緒に作り上げられる部分です。私はもともとデザイナーとしてお仕事をしていたことがあり、その経験が多少なりとも活かせているのかなと思います（ジョブチェンジのエピソードについてはこちら）。制作したアニメーションに対して反応を貰えると、エンジニアとしてはとっても嬉しいです！
デザイナーにすべて丸投げするのではなく、技術的な面から意見を伝えたり提案をすることで、お客様に喜んでいただけるサイトになるように日々勉強しています。
デザインの思いを汲み取ること
弊社では、トップページのデザインの作成が終わると、お客様へのご案内前にチームメンバーを中心とした打ち合わせを行います。ここでは、主にデザインについての説明や、細かな動き、CMSの仕様について共有されます。エンジニアは多くの場合、この打ち合わせで初めてデザインを見ることになるので、「どんなデザインなんだろう？」とワクワクしています（笑）
実は数年前まで、エンジニアはトップページの打ち合わせには参加しておらず、デザインが完全に確定したものをデザイナーから直接共有される、という流れになっていました。エンジニアはお客様先へ伺ったり直接話をする機会がないので、お客様についての情報が少ない状態で構築に取り掛かることになります。
しかしここ最近、デザインの打ち合わせにもエンジニアが参加するようになりました。ディレクター・デザイナーからデザインのこだわりを聞いたり、ときにはお客様とのエピソードトークも知ることができたりと、以前と比べてより近い視点で構築に携わるようになりました。
エンジニアはデザインデータや仕様書があれば、それに従って作業を進めることができるため、お客様の情報がなくても基本的には業務に支障はありません。でも、この打ち合わせがあるかどうかで、プロジェクトに対する関わり方の深さが変わってくるような気がしています。話を聞いてはじめて、「この部分はこんな動きをつけたら面白そうだな」とか、「こんな構築をしたほうが運用しやすそうだな」といったように、自分の中でアイデアやインスピレーションが湧くこともあります。
お客様のことを思って精一杯考え抜いたデザインが100点満点だとしたら、それを120点にできるのがコーディングの魅力だと思います。少し大げさかもしれませんが、そんな思いで制作に取りかかるようにしています。
誰もが分かりやすい設計を心がけること
ウェブサイトは作ってしまえば終わり…ではありません。弊社では、テキストや画像の変更といった軽微な更新作業や、新規ページの追加などの比較的規模の大きなものまで、公開後にもサイトの運用サポートを行っています。
このようなサイトの保守・運用には、構築したエンジニアだけではなく、案件に携わっていないスタッフやデザイナーも関わることになります。プロジェクトへの参加有無や経験値の大小にとらわれることなく、誰もが分かりやすいサイト設計を心がけることがとても重要なポイントになってくるのです。
少し専門的な話になりますが、例えば、クラスの命名ひとつとっても、ある程度ルール決めをして書いていくようにしています。弊社ではあまり厳密なルールは設けていませんが、BEM*の考え方をベースに記述することが多いです。ここをしっかりとおさえておくことで、無駄なくスピード感のあるコーディングにつながるのかなと思っています。
また、公開後にサイトを一番に利用するのはお客様です。ほとんどのお客様がサイト運用に携わった経験がなく、想定外の使い方をされることも十分に考えられます。そのようなことが起きてもデザインが崩れないようにしたり、ウェブに対しての知見がない方でもできるだけ更新しやすいような仕組みを考えたりと、細部まで気を配って構築することが大切になります。
「ただデザイン通りに構築すれば良い」という考えではなく、最終的にサイトを運用するお客様にストレスなくご活用いただけるサイトを心がけています。
*BEM：Block、Element、Modifierの3つの要素を用いた、CSS設計の一つ。
さいごに
縁の下の力持ちポジションを担うことが多いエンジニアですが、このブログを通して制作に対する思いを少しでも知っていただけたら嬉しいです。
これからもディレクター・デザイナーと一緒に心に残る素敵なサイトを制作していきたいと思います。
最後までご覧いただきありがとうございました。