
こんにちは、ツイちゃんです!
WEBデザインの職業訓練校を途中退校し、就職までいよいよあと一週間です。
WEBデザインではPhotoshopをよく使うと聞いています。
なんでも、デザインカンプと呼ばれる、Webページの設計図を作るのに使うらしいです。
本当は使い方を職業訓練で教わる予定だったのですが、私は就職のため途中退校してしまいました。
現状、Photoshopの使い方がよくわからないんですよね。
「うーん、せっかくだし、自分でもデザインカンプが作れるようになりたいなあ」
と思ったので、今日は、Adobeの公式ブログに書かれているやり方を使い、Photoshopによるデザインカンプ作成の練習をしてみました。
今回使用した教材・ソフト
今回使用した教材は、「【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能」です。
第1回から第5回まで実施してPhotoshopのデザインカンプを作成。
デザインカンプを作れたので、ついでにコーディングの練習もしてみました。
使用したソフトは以下の3つ。
- Adobe Photoshop(デザインカンプ作成に使用)
- Adobe Illustrator(ロゴ作成に使用)
- Microsoft VS Code(コーディングに使用)
作業時間はだいたい6時間くらいでした。頑張った。
デザインカンプ作成
最初に、Adobeの第1回・第2回の教材を使い、デザインカンプの大まかな配置を作成します。
今回は、お医者さんのホームページ(PCのみ)を作っていくようです。
ラフ画作成
Photoshopでカンプを作成する前に、手書きでざっくりと幅や配置をイメージした図を作成しました。

この手書きのメモがあると、迷ったときにすぐ確認できるので、とても便利なんですよね。
ざっくりとしたデザインカンプ作成
続いて、Photoshopにデザインをざっくりと落とし込みます。
長方形ツールや線ツール、レイヤーや均等配置など、教材のやり方に従ってペタペタ作り上げていきます。

できました!
うーん、いいですね。
この時点でなんかそれっぽい見た目になりました。
ロゴ作成
教材のサンプルファイルがリンク切れを起こしていて、ロゴが取得できなかったので、Adobe Illustratorでロゴを作成しました。


とりあえずロゴっぽければ何でもよかったので、適当に作っています。題名はイルカです。
PNGデータを書きだし、ヘッダーや各所に貼り付けました。
テキスト・画像データのはめ込み
あとはひたすら作業を行い、画像やテキストをペタペタとはめ込んでいきます。

クオリティはともかくとして、一気にWebサイトっぽくなりました。
今回、「ぱくたそ 病院」と検索して出てきたフリー素材を画像に使っています。
よくよくみたら、彼らは医者じゃなくて薬剤師みたいですね。まぁいいか。
今回は気が回らなかったのですが、テキストのfont-sizeやline-heightをこの時点でしっかりと決めておけば、コーディングのときにとても楽になりそう。
次は気を付けていきたいですね。
デザインカンプ完成

完成したデータがこちらになります。
「まぁ、なんか怪しいけど、デザインカンプっぽいか?」
くらいの見た目にはなりました。
Photoshopでデザインカンプを作ると、フォントサイズやMargin/Paddingを全て数字で確認しながらコーディングできるので非常に便利です。
WEBデザインをやっている人は、紙で書き、デザインカンプに起こし、コーディングする人がほとんどだと思いますが、その理由がよくわかりました。こりゃ便利だ。
コーディング
せっかくデザインカンプができたのでコーディングしてみました。

とりあえずそれっぽい見た目にはなりました。
課題としては、
- デザインカンプに、Webフォントにないフォント(漢字タイポス415)を使ってしまった
- メイン部分、左と右に不自然な余白がある
- 右側の「診療時間」「電話相談」のところを画像データではなく、テキストで実装したい
- HTMLとCSSで作ったWebページを公開する手段を探す(Xfreeでいいと思う)
というものがあります。
次はもう少ししっかり作ろう。
今回使用したHTML/CSSのファイル、画像ファイル、Photoshopとillustratorのデータは全てまとめた上でGoogleドライブに公開してあります。
ぐちゃぐちゃなコードで大変お恥ずかしいのですが、興味がある人は、ぜひダウンロードしてみてください。
おわりに

以上、Adobeの公式ブログの課題をやってみた記録でした。
やはり自分で手を動かすと覚える速度がぜんぜん違いますね!
職業訓練の時もそうでしたが、実践ってほんと大事だなあと思います。
Photoshopを使ってデザインカンプを作るのは非常にやりやすかったので、これから使っていく予定です。
IT系ではいろいろ使うソフトがあるようなので、勉強・練習を継続してやっていきます。がんばるぞー
追記:Githubで公開
GithubでWebページを公開できる機能があることを教えてもらい、先ほど公開してきました。
とても便利。ポートフォリオを作るときは、全部これでいい気がする。
コメント