MENU
カテゴリー
アーカイブ

【WEBデザイン】Photoshopによるワイヤーフレームの作成練習

こんなのを作りました

こんにちは、ツイちゃんです!
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ページを公開できる機能があることを教えてもらい、先ほど公開してきました。

とても便利。ポートフォリオを作るときは、全部これでいい気がする。

カテゴリー

アーカイブ

この記事を書いた人

群馬県前橋市に住む22歳の男性。
ブログとかYoutubeとかで遊んでます。

コメント

コメントする

目次
閉じる