暇人の寝室

技術系の記事や読書・アニメの感想などを投稿します。

【Webデザイン入門】GIMPを使ってWebデザインをやってみた【第1回】
投稿者: ylafaro0310
2020.07.01

プログラミング

経緯

LaravelやReactでよく遊んでいるのでコーディングはそこそこできるのだけれど、肝心のデザインに自信がない。コーディングしながら何となくで作ってきたが、きちんとデザインに起こしてから作れるようになりたいと思い、勉強することにした。

デザイン開始!

参考サイトはPhotoshopのものだが、基礎的な内容のようなので、ペイントソフトであればほとんど同じようなことができるだろう。とりあえず無料で始められるGIMPでやってみることにした。(今のところデザイナー志望というわけではないので。)

下書き

まずは作るWebサイトの下書きを書く。できる人はいきなりツールを使っても良いが、絵と一緒で初期段階は手書きで起こした方があれこれ考えやすいと思う。

下書きしたデザイン

参考サイトに下書きの例があったので、それをもとに書き起こした。架空の「こころクリニック」という病院のサイトを作る体にした。こんな感じで大体どこに何を置くのかを書いておけばツールで起こしやすい。

ツールの初期設定

書き出す前にツールの設定を行い、デザインをしやすくする。

グリッドを表示する

Webサイトはピクセル単位でコーディングされるので、デザインも合わせてピクセル単位で書く。真っ白な状態では幅の計算などがしづらいので10ピクセル単位のグリッドを表示させる。

グリッドの表示

GIMPでは「編集>設定>新しい画像の設定>グリッド」でグリッドの間隔などを設定できる。グリッド表示のON/OFFは「表示>グリッドの表示」から行える。

ガイドを引く

続いてガイド線を引く。余白の間隔や段落を揃えたりする場合に非常に重宝する。

GIMPでは「画像>ガイド>新規ガイド」から作成できる。表示のON/OFFは「表示>ガイドの表示」で可能。

ガイドの表示

初期段階ではページの両端に引いておき、都度追加していくのが良い。

GIMPを使って書き起こす

ワイヤーフレーム作成

ベースとなるワイヤーフレームを先に書き出してみる。絵で言うところのアタリのようなものだ。これで要素の配置を大まかに決める。

ワイヤーフレーム作成

この時、色も決まっていれば色も決めておくとざっくりとイメージができる。

文字の入れ込み

続いて文字を入れ込んでいく。文章が決まっていない場合は適当な文章を入れておくとよい。この段階ではまだ画像が決まっていない場合もあると思うので、画像は長方形を仮で置いておく。

文字の入れ込み

画像の埋め込み

画像が決まっていれば画像を入れ込む。今回は練習なのでフリー画像を探してそれっぽくあてはめた。

画像の埋め込み

完成!

出来上がったページがこちら。

完成したデザイン

初心者にしてはなかなかの出来だと思う。参考サイトまんまだけれど。

あとはこれを元にブラッシュアップするなり、コーディングに移るなりすると良いだろう。

ポイント:レイヤーグループを使う

ここまでの作業でたくさんのレイヤが増えていくと思うので、レイヤーグループを使ってレイヤをまとめておくと良い。そうするとレイヤの可視化や移動がまとめて行えるので作業の効率化につながる。

レイヤーグループの使用

まとめ

ペイントソフトを使ったデザインは難しいものだと思って今までやらなかったが、順を追ってやっていくと難しくはなかった。何より参考サイトの説明がすごくわかりやすくて助かった。

また、デザインが出来上がるととても充実感がある。

次回以降でレイアウトや配色など、作りながら学んだことや無意識に覚えていた知識などをまとめていこうと思う。

参考サイト

【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能

次回

カテゴリ:Webデザイン,プログラミング

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


プライバシーポリシー/ ©2020 暇人の寝室