こんにちは、ツイちゃんです！
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ページを公開できる機能があることを教えてもらい、先ほど公開してきました。
とても便利。ポートフォリオを作るときは、全部これでいい気がする。
コメント