【WEBサイト制作】情報の精査と新たな壁 | 元パチンコ店員SEのWEBデザイン・IT独学ブログ~異業種からWEBデザイナーを目指す~

元パチンコ店員SEのWEBデザイン・IT独学ブログ~異業種からWEBデザイナーを目指す~

当ブログは元パチンコ店員のSE(システムエンジニア)が異業種から将来WEB制作会社へ
就職OR副業WEBデザイナーになりたいと始めた独学記録です。
独学でWEBデザインを習得する様や日常の出来事、ITに関することを日々綴っています。

今回のコーポレートサイトのヒアリングは全部で5回。
池田さんと私でアイディアを出しながらゆっくりじっくり煮詰めていきました。
当初は「どんな情報が必要なのかわからない」と言っていた池田さんもヒアリングの回数を重ねるごとに「このページはいらない」、「このページはポップな感じにしてほしい」、「アピールポイントになるものを考えてきた」というようにお互いに霞がかっていたところを膝を突き合わせてひとつひとつ整理することでようやく明確なHP全体像の認識をすり合わせることができました。

今回のブログでは設計段階での情報精査と立ちはだかった課題と対策について書いていこうと思います。

情報の精査

情報の精査とは具体的になんのことなのか、ひとことで言ってしまえば原稿の推敲です。
池田さんからはホームページの素材としてたくさんの画像や書類を準備していただきました。
受け取った画像は観光地の風景や車両、従業員の方々のもの。書類は新型コロナ感染拡大防止策から新規事業の企画書まで。
しかしながら、これらすべてをホームページに掲載すると情報が多すぎて煩雑になってしまったり、ユーザーが求めている情報をすぐに入手できないユーザビリティの低いページになりがちです。
いる・いらないと取捨選択をし、カテゴリを分けて情報を整理した結果A4用紙3枚分の情報が1ページにまとめられたり、魅力的なサービスはより購買意欲をそそるようなキャッチフレーズや画像を使ったレイアウトにする構想を練りました。
また、バナーはどれくらい必要か?そもそもそのバナーは本当に必要なのか?
無駄を省き、ユーザーが求める情報まで1~2ステップで到達できるようにサイトマップを作りました。

新たな壁

(1) デザインセンス

私は約30年もの間オシャレや見た目のよさということに頓着することがありませんでした。
そのためか美的センスを問われてしまうとこれと言って突出した能力はなく、会社のイベントでチラシを作ったり、名刺のデザインを頼まれも色づかいやフォントの配置、背景などの要素も王道セオリーに準じたもの。つまり”ありきたりでどこにでもありそうなもの”しか作ることができません。

(2) 制作時間

システムエンジニアとして働きながらホームページを制作することになるので、制作時間は帰宅後か土日しか充てることができません。
職業柄残業ありきなところもあるので、平日はあまりまとまった制作時間をとることができそうにありませんでした。

(3) デザインツールの使用方法をマスターしていない

Photoshopやillustreterをゆくゆくは勉強したいと思っていたのですが、未だにデザインツールについての学習はできていませんでした。

壁に対する対応策

公開されているデザインテンプレートを使用

いちからトップページやサブページを作るとどうしても作業時間が長くなってしまいます。
エディターでコードを書きながら、Webブラウザで表示を確かめる。その繰り返しを経てWebサイトはできあがります。
(1)と(2)の問題を解消するために私は一般公開されているデザインテンプレートを改修する方法をとりました。
Googleなどの検索エンジンで「HTML テンプレート」、「HTML フリー テンプレート」と検索すると商用フリーのWordPressテーマやデザインテンプレートをダウンロードすることができます。
これらのデザインテンプレートは動作確認が済んでいるものが公開されています。
根幹となる骨組みはそのまま利用し、表示させたいように改修をする。
そうすることで、自分が手を加えた部分だけを確認することで動作確認テストはクリアできるため、制作時間とテスト時間を大幅に削減できます。

オンラインサービスで画像加工

ネット上にはすでにヘッダ画像やバナー、ロゴなどを簡単に制作できるオンラインサービスがあります。
有名どころで言えば「バナー工房」。このサービスはWebブラウザ上で画像のリサイズ、トリミング、文字入力ができ、ガイドに従って操作するだけでひととおりWEBサイトに必要な画像素材を作成することができます。ぼかし加工やモノクロ加工もできて無料。とても良心的なオンラインサービスです。