PROGRAMMING

このサイトどう作ったの?具体的な手法と確実にスキルアップするための心構えについて

PROGRAMMING 公開日:2018年10月02日 更新日:2019年08月03日

この記事はリニューアル前の記事です。

はじめに

HTML・CSS、JavaScript…etc.
Webデザイナーとして一通りの技術を習得したけれど、それをどうやって制作に取り入れるのか?
自分の技術、やり方は現場で活躍している人に比べてどうなのだろう?
どうやってスキルアップしていけばいいのだろう?

制作実績を詰めていない、駆け出しのWebデザイナーの方など、不安に感じている部分もあるのではないでしょうか。
企業に勤めている方なら、先輩社員のコーディングデータなどを見て勉強できるけれど、フリーランスでやっている方などは、なかなか他の人がどうやってコーディングしているか、知る機会は少ないのではないでしょうか。

今回は私のポートフォリオサイトを例として、以下の点にフォーカスしてご紹介します。

  • どんな技術を使用しているの?
  • この部分はどうやって実装しているの?
  • 実装が分からない時はどうやって解決しているの?

など、一人で制作できるようになるための、Tipsをお届けします。
今回は個別に深掘りはせず、紹介にとどめますので、詳しく知りたい方は参考記事をご参照ください。

どんな技術を使用しているの?

デザインはPhotoshopとIllustratorで制作。
デザインカンプを元にHTML5・CSS3をベースとしたコーディングを行っています。
そこにJavaScriptといったプログラムで動き・機能をつけています。

と、かなーり大雑把に説明しましたが、この辺りは皆さんご存知ですよね。
では具体的にどういったように実装してるのか、なぜその表現を採用したのかなどの説明に移りたいと思います。

この部分はどうやって実装しているの?

1. キービジュアルのマウスに追随するアニメーション(パララックス)


Parallax.jsというJavaScriptライブラリを使用しています。
マウスの動きやセンサーの動きに追随して背景画像や要素が動きます。
複数の要素を組み合わせることが出来ますが、今回は背景のみ動くようにカスタマイズしています。

参考記事​

2. ニュース部分の動き(ティッカー)


vTickerというjQueryプラグインを使用しています。
こちらは賛否両論ありますが、簡単なお知らせを掲載したい、だけど場所はとりたくない場合に重宝します。
要素が全て一覧として表示されないので、情報取得の観点から見れば、ややユーザビリティの配慮にかけますね。
ですがアニメーション時に目に入ったりなど、メリットもあります。
自分のサイトのコンセプト・構成に合わせて、採用するか否かを決定しましょう。

参考記事

3. 画像・テキストを左から順にフェードイン・アニメーション


こちらはCSSのanimationプロパティと@keyframesを使用して実装しています。
JavaScriptなどを使用せずとも、CSSのみで簡単にアニメーションを実装することができます。
この他にもよく見るテクニックとして、スクロールして画面が表示された時、コンテンツをフェードインする、などがありますね。

ただし、スクロールするとコンテンツが表示されるようなアニメーションは、ユーザーの意図しない方向に強制的に視線を誘導するような側面もあります。
ユーザーは情報を取得するためにページを訪れているので、それを阻害するような動きを取り入れてしまうと、ユーザーにとってストレスになります。
デザインギャラリーサイトなどに掲載されている、高いクオリティのWebサイトで使用しているからといって、安易に取り入れるのは避けたほうがよいでしょう。
それらのサイトはアニメーションまで全て徹底的に計算して制作されているものがほとんどです。
自分が制作しているサイトに合わせて、検討しましょう。ケースバイケースですね。

参考記事

4. Our Serviceのグラデーション部分


CSSのグラデーション(linear-gradient)を使用して、実装しています。
CSS3から登場した関数で、手軽にグラデーションの表現をWebサイトに取り入れることが出来ます。
配色については、Webサイトの印象を大きく決定づける要素でもありますので、効果的に使用していきたいですね。
Colorについてのギャラリーサイトなど、日頃から眺めているとインスピレーションが湧くかもしれませんよ。

参考記事

5. コンテンツの影(ボックスシャドウ)



CSSのbox-shadowを使って影(ドロップシャドウ)を表現しています。
この表現を使用することで、平面のWebサイトの世界観に、高低の概念が生まれます。
コンテンツに対して、どちらが下にいて、どちらは上にいるのかなど、印象も変わってきますね。

ただ、先述したグラデーションやボックスシャドウなどは変に多様したり、おおげさに使用したりすると、野暮ったくなるので注意です。
あくまでデザインのエッセンスとして、利用するのがよいかと思います。

参考記事

6. ホバーエフェクト


コンテンツにマウスオンした時に行うアニメーション表現です。
リンクに対するホバーエフェクトは、今マウスオンしている箇所がリンクであることをユーザーに伝える手段でもあります。
どんな表現をするかでクリック数なども変わってくる、重要な要素です。

参考記事

7. 画像を丸く切り抜く表現



CSSのborder-radiusプロパティを使用しています。
丸い画像は、最初っから丸い状態の画像データを用意してもよいのですが、汎用性がありません。

例えば同じ画像を、このページでは丸く表現したい、だけどその他のページでは長方形で表示したい時。
CSSで長方形画像を丸く切り抜くことで、余計な画像データを増やす必要がなくなり、非常に効率的です。

参考記事

8. SVG



SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略です。
ベクター・グラフィックスとあるように、JPEGやPNGのようなビットマップデータではなく、ベクターデータです。
これにより、拡大縮小しても、画像をボケずに表示でき、Retinaディスプレイなど解像度の高い環境でも綺麗に表示することができます。

また、SVGデータはCSSで色を変更することも出来るので、アイコンやロゴなどで複数のカラーを用意しないといけない場合でも、画像データはSVGファイル1つで解決します。

参考記事

9. ブログ記事のスクロールに応じた見出しが強調される


Progress NavというJavaScriptライブラリを使用しています。
スクロールしても画面内に追随し、今表示されている箇所の見出しを強調表示できます。
例としてはプログラミング情報のナレッジコミュニティ『Qiita』の記事ページのようなイメージです。

目次を表示する利点としては、ユーザーの興味のある情報がこのページ内にあるかどうかの判断が内容を読まなくても把握できる点にあります。
また、自分の興味のある箇所を取捨選択して移動できるのも良い点だなと感じています。
ページの離脱率を下げるには、情報の取得スピードを上げる工夫をすることである程度対策することは可能なので、色々検討してみましょう。

またプログラムのライブラリ、プラグインなどは自分の想定しない動きの場合もあります。
その時は他の技術と組み合わせることで実現することができます。

例:Progress Nav(JavaScriptライブラリ)に対して、CSS(position: sticky)を組み合わせて、スクロールで下層まで来たらそれ以降はfixedする目次を制作する。

参考記事

10. 吹き出し風のデザイン


一昔前は画像で実装していましたが、今は全てCSSで制作することが出来ます。
吹き出しのデザインを使用することで、キャラクターを立てることができ、個性が生まれます。
また、テキストをそのまま表示するよりも吹き出しを通じて伝えることで、ユーザーに読んでもらえる可能性を高めることが出来ます。

参考記事

11. パソコンとスマートフォンで表示する画像を変える


ユーザーの環境、パソコンとスマートフォンで別の画像を表示したい場合があると思います。
例えばパソコン環境だと画面が横長です。ではスマートフォンでの表示はどうでしょうか?縦長ですよね。
パソコンで美しい画像の比率でも、スマートフォンで表示すると、小さすぎたり、逆に大きすぎたり…。意図した見せ方でない場合があります。
そういった点を解消することが出来る技術を取り入れてみると、よりユーザーの環境に合わせてWebサイトを最適化できるでしょう。

参考記事

実装が分からない時はどうやって解決しているの?

本記事でも分かる通り、参考記事で書かれていることを参考にし、実際にこのポートフォリオサイトを制作しています。
まずは自分が実現したい挙動のイメージを明確にし、それを実現できる方法はないか調べましょう。
ある程度の土台があることが前提となりますが、基本的にWebで調べることで大抵のことは解決することが出来ます。
なければ全部自分で作ればいいだけです。

ではどうすれば土台ができるのか?

日頃から良質なライブラリやプラグインを紹介しているサイトを見たり、新しい技術のキャッチアップでまずはインプットを増やします。
そして自分の案件などで、新しい技術を使用して実際に触れてみましょう。
その繰り返しが分からないを分かる!に変える、地味ですが確実にスキルアップできる方法でもあります。

また実装方法が気になるWebサイトは積極的にソースコードを覗いてみましょう。
見たことのないCSSのプロパティなどがあった時は、それをメモし、調べて少しづつでも覚えていけば、必然的に引き出しは増えていきます。
結局はインプット→アウトプットの繰り返しに行き着きますね。

また点と点とがつながり線となるように、インプットした技術同士が繋がる瞬間があります。
一つのライブラリやプラグインで自分の理想とする動きが実現できなかったとしても、別の技術と組み合わせることでそれを可能にすることができます。

いつも当たり前にやっていることは当たり前ではない

ある程度技術が身に着き、経験も積むと、仕事がこなれてくると思います。
新しい情報をインプットせずとも、今の自分の引き出しでなんとかなってしまう状態がきます。

毎回同じ方法でコーディングをしていませんか?
案件ごとに同じようなデザインを実装する時でも、改めて別のアプローチはないか調べてみましょう。
より簡単で便利な構築の仕方が見つかるかもしれません。

例:flotではなく、flexboxを使用するなど

日々アンテナを張って情報収集するのも大事ですが、あまり記憶に残らないのが現状です。
目の前の案件で実際にアウトプットしてこそ、自分の血肉となります。それを繰り返すしか、ないのです。
目の前の壁を常に破ることが出来るか。自分との戦いです。

おわりに

しかし何もかもを自分で生み出すのは、大変ですし効率も悪いです(大事なことではあるが)。
世の中には色んな便利な技術や、ためになる情報が多くあるので、今分からないことがあっても不安にならず、その都度自分なりに調べてみるなどして、着実に技術を身に着けていけば良いと思います。

※ここまで様々な技術について、紹介してきましたが、ブラウザの対応状況や、プラグインのアップデートなど、諸々注意が必要です。
※情報も劣化していくので都度、参考にする記事についても、自分で取捨選択してください。

では、よいWebライフを!