基盤系のエンジニアが手探りでWEBデザインをしてみた

はじめに

普段はファッション系サイトの分析基盤を作っている私が、知識0からWEBデザインをしてみました。
そこで使ったツールやサイトを紹介します。
※あくまで素人がググった範囲でやったものなので、本職の方から見るといろいろ間違っているかもしれません。

ソースコード
出来上がったもの(※おっさんがドーンと出てきます。ご容赦ください。)

動機

サービスをいくつか個人で開発していましたが、bootstrapのサンプルコピペ OR テンプレ当て込みばかりで思うようなUIにならず、いい加減自分で作れるようにしたいと思い基礎から学びなおすことにしました。

スキル

  • デザイン経験0
  • html,cssはなんとなく読める

進め方

「WEBデザイン 進め方」とググったところ、以下の進め方が標準なようです。

  1. 要件を決める
  2. ラフ図を書く
  3. photoshopに落とし込む
  4. html,cssを書く

要件を決める

各種サービスへの導線を一つにまとめたプロフィールを作成しようと考え、
以下の項目が表示されていることを要件としました。

  • プロフィール写真
  • 名前
  • プロフィールの概要
  • 各種アカウントへのリンク

ラフ図を書く

ラフ図を書くにあたって「なるほどデザイン」という界隈では有名らしい本を読みました。
今回のデザインに活用できているかはわかりません、、、、

ラフ図がどの程度「ラフ」で良いのか分からなかったので、
以下のラフさにしましたが、今回はこれで後続に影響はありませんでした。

photoshopに落とし込む

ここが一番辛いと思っていましたが、案外嵌らず作れました。

photoshopを手に入れる

どれが一番安いプランなのかきっちりと調査していませんが、
Creative Cloudフォトプランというものに入りphotoshopを入手しました。

photoshopを操作する

適当に触ってみましたが、何がなんだかわからなかったため、Adobeが提供している教材の
PhotoshopでWebデザインをはじめよう!」を一通り学習しました。これを読むと、

  • プロジェクトの作り方
  • ガイド(全体の目印にするもの)の引き方
  • オブジェクトの作り方
  • 文字の入れ方
  • 画像の埋め込み方

など、基本的なことが大体できるようになりました。

こんなものができた。

結果、こんなものがデザインされました。(画像はpsdファイルをpngでエクスポートしたもの)
各種サービスのロゴは適当なところからDLしてきました。

html,cssを書く

エディタを選定する

atomで書こうと思っていましたが、eclipseやrubymine的なものがWEBデザイン界隈にもあるのではと考え、
調査したところBracketsというエディタがイケているらしいので採用しました。

書く

photoshopで作成したデザイン案をもとに、ソースに落とし込んでいきます。

シンプルな構成なので、「既存の知識 + htmlのリファレンス + cssでやりたいことをググる(ex. 画像 円 切り抜き)」でなんとかなりました。
(構造がきれいかどうかはわかりませんが、要件は満たせました。)

公開する

以下を参考に、github.ioで公開しました。
https://qiita.com/ryokosuge/items/f929821ba5ae9ba2c32b

まとめ

一通りのWEBデザインを通しでやってみました。
個人的にはphotoshop部分で苦戦すると想定していたのですが、割とスムーズに進められ、一番楽しい部分でした。
次は動きのあるページ(メニューがびょーんと降りてくるカッコいいやつとか)を作ってみたいと思っています。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.