Webサイト制作 今と昔

Date : category :

参加しているクリエイターユニットの中で、IllustratorでWebのデザインはありか、なしか、というようなやり取りをしているのを「5年前くらいだと、ううん、、と思っていたかもしれないけれど、今だったらアリだなー」などと思って見ていました。これまでスタンダードだったものがそうではなくなったり、見直される技術があったりとWebの世界は変化し続けています。
ということで、私が知っている・取り入れている範囲での変化(そんなにたいしたことではないかもしれませんが)をまとめてみます。

固定から可変へ

昔はWebのデザインといえば、ほとんどのサイトが固定幅でさらにどんな環境でも同じに見えることを目指していたりと、紙のデザインの影響を大きく受けていましたが、今はWebらしく、幅もリキッドで、可変が当たり前になりました。背景としてはスマートフォン対応の影響が大きいですね。

単位がpxからem/remへ

レスポンシブWebデザインの手法でのサイト制作が主流になってからこれまでpxで指定していた単位をemやremで指定するようになりました。文字はこれまでも%で指定したりもしていましたが、高さや幅など文字以外の指定には必ずpxを使用していました。
それが今は文字のサイズを基本とした単位のemやremで指定するようになりました。デバイスの変化に対応しやすい単位ということでemやremで指定すると良いようです。
また今後はvwやvhなども使用されるようになるかもしれません。

アイコンなどはSVG形式に

アイコンなどはgifやpngのものを使用していましたが、今年からSVGも使用しています。SVGはビットマップと違い拡大しても綺麗ですし、わざわざサイズ違いのデータを作らなくてもよいので、CSSでデザインする際に本当に便利です。SVGが使われるようになってきてからIllustratorでWebのデザインはありだと思うようになりました。
SVGはアニメーションで動かしたりいろいろできるようなので、勉強しながらさらに有効活用できればと思っています。

UXが大切に

スマートフォンの普及からコンテキストを考えたサイト制作の必要性が高まりました。UXデザインに関する情報もさまざまなところで目にします。ユーザーの心理や行動を見据えたWeb制作をしなければいけません。

CSS3を気軽に

古いIEを対応ブラウザに含めないことが多く、CSS3を導入しやすくなりました。
アニメーションなど簡単な動きもCSS3で実装できるようになってきています。
これまでPhotoshopで作っていた装飾もCSSで作ることができたり、CSSでのデザイン環境はすでに充分に揃っています。

さようなら画像化された文字

ここ2年ほどでほとんど使用しなくなったのが画像化された文字です。一部ランディングページなどでは使用することもありますが、それ以外ではほとんど使用しなくなりました。CSS3のおかげで文字に装飾したり、斜めに傾けたり、また縦書きも対応できたりと、画像化しなくても様々な表現が可能になりました。
画像化された文字がないと、テキストの修正をするのに、Photoshopなどのデータを共有する必要がなく、元データがなくて修正できない!ということもありません。すべてテキストなので軽量ですし、検索エンジン対応としても、アクセシビリティーを考えても、画像化されていない文字が一番良いのではないかと思います。

他にも例えばFlexboxを導入されたり、どんどん新しい技術で制作を行っている方もいらっしゃると思います。
環境に合わせて技術が進化していく世界なので、面白くもあり、ときにはハラハラしたりもしながら新しいものを取り入れていかねばならない、というのがWeb制作の世界なのだなぁと思います。