メーカー勤務30代サラリーマンが、脱サラして商売するために、WEBデザインについて考えた

WordPressやPHPの勉強をしながら、Filmingのターゲットを意識して、WEBページデザインのイメージを整理した

この記事は脱サラして、ゼロから独学して、この程度のものなら作れるようになりました、という記事のシリーズです

filming_top_header
デジタル写真をフィルム化するサービス【Filming(フィルミング)】をやってます

このブログのカテゴリ「脱サラ前の準備」で長々と記事を書いていますが、「ゴチャゴチャ言ってないで早く何をやるのか書け」という声が聞こえてきそうなのでそろそろ書きます。

それはデジタル写真をフィルム化するサービス【Filming(フィルミング)】です。

https://poli-studio.com/2015/09/10/354/(脱サラはじめました)

過去記事一覧はタグ:Filmingメイキング記事からどうぞ

ワタシ的WEBデザインの進め方

のっけからなんですが、私は美的センスはほぼゼロです。

ですから、WEBデザインを自力でどうにかしようなんてさらさら思いませんでした。

毎度お馴染みになりましたが、本屋でWEBデザイン関連の本を探したら、ちょうどいいものが見つかりました。

【ウェブデザイン&レイアウトの見本帳(オブスキュアインク)】

こちらの本にはWEBデザインのセオリーと、それが実際に使われているWEBページを例にして解説されています。

この本に出てくるようなWEBページを同じレベルで実現するスキルは当然持ち合わせていないので、色使いや、要素の配置の仕方など、部分部分を抜き出すような感じです。

実例が300点以上も掲載されているので、FilmingのWEBページの完成形をイメージしながら、そのイメージに近い要素で、自分が作れそうなものを取り入れていきました。

私にとってはある意味で辞典のようなものです。

FullSizeRender

そして、当然一発ではデザインは決まらないので、いろんなパターンをラフスケッチしてイメージしたりしました。

それで実際に自分が作れるかも、コーディングしながら考えて、できなさそうなところは、改めて本を読み返して別のデザインを探したりというのを繰り返しました。

これらの作業がさすがに時間がかかりました。

ネットで商売をするからにはWEBページはそのサービスの顔そのものであり、インターフェイスでもあるので、自分なりにデザインを煮詰めたつもりです。

なるべくお客さんの立場に立って、ただでさえ馴染みのないサービスを出来るだけわかりやすく、無理なく注文してもらえるところまでスムーズにたどり着けるデザインになっているか。

自分ではわかりやすくしたつもりですが、こればっかりはたくさんのお客さんに使ってもらえるようにならないとわからないですね。

WEBデザインでの色使いについて勉強

WEBデザインの要素のひとつである色使い。

これはムチャクチャ大事だろうと私なりに考えて、上の本とは別に、一冊の本を買いました。

【ウェブ配色 決める! チカラ – 問題を解決する色彩とコミュニケーション(坂本邦夫)】

これはおそらくWEBデザイナーさんがクライアントと「色を決める」という作業を想定して書かれたものだと思いますが、素人の私にとっても非常に勉強になりました。

色についての基本的な知識から、PCやタブレット、スマホで色を見るという特有の問題、WEBページでよく見る要素(ボタン、テキスト、見出し)に対する考え方など、さまざまな観点から書かれています。

WEBページにおける色は、明確に目的を持たせて使う必要があるということがよく分かる本です。

この本のおかげで、Filmingのページをデザインするにあたって、配色のカンどころがわかったような気がしました。

 

こう書いてしまうと、かなりあっさりした感じですが、PHPの勉強と同じく、ここにも相当な時間を割かれましたね。

でもこれからいろんなことをやろうとするなら、簡単なWEBページくらい自分で作れるようになっとかないと、と思ってこの頃はやってました。

今回ご紹介した本を作業しながら何回も見返したことで、初歩的なパターンはなんとなく頭に入ったと思います。

次回は、もう少し具体的なWEBデザインの作業について書くつもりです。