最近は、システムの設定モノばかりで、ウェブサイトのデザインを、
一向にやっていませんでしたが、
久しぶりに、ウェブサイトのデザインの仕事が入りました。

全てHTMLというわけではなく、WordPressで行うのですが、
それでもHTMLの知識は有用です。
今回の仕事は、ページの追加の依頼でした。

全体的な構成、素材などのデザインは、
前に担当の人にやっていただいたのですが、
その人がいなくなってからは、ほぼ全て自分で考える事になりました。

構築はできても、デザインのほうは、さほど得意でもなかったので不安でしたが、
既存の素材をよく観察し、統一感は出そうとは考えていました。
そして、とにかく見やすさを重視しました。

中でも文字の大きさには気を使いました。
HTML内でテキストとして記述するのもそうですが、
画像として記載する文字の大きさには、とくに注意が必要です。
画像を縮小すると、思っていたよりも文字が小さくなってしまう場合もあり、
特にアンチエイリアス（ギザギザを目立たなくさせる処理）がかかると、
小さな文字なら潰れてしまう事もありえます。

素材自体は基本、イラストレーターで作る場合もありますが、
実際に素材とする際には、ピクセル単位で大きさを調節する場合があるので、
イラストレーターで作った画像を、
別のフリーソフトで加工や縮小を行う場合があります。
まぁ、この辺は単に自分がイラストレーターにおいての
出力方法を把握していないだけかもしれませんが。
フォトショップを使うという手もありますが、
画像の簡単な拡大縮小ぐらいなら、フリーソフトのほうが手軽です。

超原始的かつアナログな方法ですが、
場合によっては、イラストレーターで作成したワークスペースを、
そのままスクリーンショットを撮って、それを加工する場合もあります。
自分がまだピクセル単位での出力方法を知らないだけか、
この方法を使ったほうが、手っ取り早い場合もあります。
素材作りに、あらゆる方法を利用します。

また、写真ではなく色数の少ないシンプルな画像であれば、
256色のPNGに変換する場合もあります。
この減色は主に、ゲームの素材を作る用途も多いのですが、
グラデーションが少なく、減色してとくに目立ちさえしなければ、
減色するだけでも容量がかなり落ちる場合があります。

容量の面は、とくに昔から気にされている要素でもあります。
今でこそ、高速な回線や高性能なPCで、
昔に比べると表示も早いかもしれませんが、
それでも容量を気にするという事は、さらなる快適さを求める要素でもあります。
基本、ページの素材は1MBを超えると、個人的には問題視します。
ただ、どうしても大きめの画像を使用するのであれば、
別リンクで表示させたり、モーダルウィンドウを利用し、
大きめの画像で少し時間がかかるという事を、
見る人に承知の上で、開いていただくというようにしています。

そして、レイアウトを考えるうえで、
重要な配慮面といえば、サイトの横幅だと思います。
基本、ウェブサイトを観る人は、マウスのホイールを動かして
上下にスクロールして観る事になると思います。
しかし、横にスクロールしようと思えば、
マウスホイールを左右に傾ければいいマウスもありますが、
そのタイプのマウスも、決して多くはありませんし、
マウスによっては、ホイールの左右が「戻る」「進む」に
割り当てられている事もあります。
横スクロールをするには、上下どちらかのスクロールバーをドラッグする必要があり、
マウスを使う人にとっては、不便な要素です。

基本的に、どのウェブサイトも、横幅は決められています。
現在の一般的なPCのディスプレイの横幅などを考慮すれば、
800ピクセル程度が妥当でしょうか。
なので、コンテンツを横向きに詰め込もうと思うのならば、
そのコンテンツも、それなりに縮小しなければならず、
コンテンツ単体は、じつにこじんまりとした物になってしまいます。
できるものならば、縦一列にしたいところではありますが、
横に並べる事で意味が発生するのであれば、
コンテンツ内の文章の適度な改行を加えたり、
画像の中の説明文の位置を変更して、
横幅を使わないような配置にするなどといった配慮も行います。

ただ、お客様からの要求には、なるべく答えるためにも、
出された仕様書の多くは、なるべく再現するべきだと思います。
ただ、どうしても無理のある場所や、改良が必要な場所は、
相談を行ったうえで明確に把握し、作業を行いたいものです。

ただ再現するだけでは、デザインとは言いません。
個人的にも、できれば「誰がこうしろと言った？」という回答ではなく、
新たにデザインしてほしい要素や、
一度作ったものを見たうえで、改良してほしい要素の情報が欲しいところです。
もし、そういった事を明確かつ抵抗がないように情報交換が行えなければ、
個人のセンスが発揮される事がなく、
ラフ画や、マンガで言う「ネーム」のままであろうとも、
ただ再現を行うだけの結果になってしまうでしょう。

そして、お客様となる企業様の事業に関しては、こちらは素人ではありますが、
出来る限りは、お客様の取り扱う事業を把握したうえで、
作業を行っていこうとは考えています。
それを把握することによって、デザインにおいて何を強調するべきなのかが、
わかってくるからでもあります。
それに、ウェブサイトを閲覧する顧客の人が、
いったい何を求めているのかの相談も可能となり、
客観的に観て、何を強調したほうが、閲覧する人の興味を引くのか、
それもまた、デザインのヒントにもなります。

Tweet