WordPressカスタマイズ

WordPressオリジナルテーマ製作記録 -vol.2- デザイン編

WordPressのオリジナルテーマ作成。前回は環境構築と本での勉強まで終わりました。
第2回目はデザインです!

ちなみに私はデザイナーでもないし、きちんとデザインの勉強はしたことはないのであくまで自己流ですので悪しからず。

前回の記事はこちら

WordPressオリジナルテーマ製作記録 -vol.1- 環境構築・勉強編WordPressでブログを始めて約半年。 自分でカスタマイズとかできるようになりたいと思ったので、勉強してオリジナルテーマを作ること...

デザインツールの準備

デザインをするにあたり、まずはデザインツールの準備。

私はXDを使用しました。
本格的にデザインをするならIllustratorとかPhotoshopを使うのがいいのでしょうけど、私はIllustratorをごりごり使いこなせないので、シンプルで使いやすいXDを使うことにしました。最近、仕事で使い方も覚えましたのでね。

初めて使う場合でも、XDは機能は少ない分簡単に使えますので、デザインをやったことがない人が使うのにははおすすめです。
ブログのデザインならXDで十分でしょう。


https://www.adobe.com/jp/products/xd.html
無料で試せるようです。

XDと同じようなソフトでSketchもあります。
機能はほとんど同じなので、あとはお好みで。こちらは買い切りタイプの有料ソフトです。


https://www.sketchapp.com/

私はAdobe CCで全ソフト使えるプランを契約しているので、XDを選択しました!

デザインの勉強

続いて、デザインの基礎知識を勉強しました。
と言っても、デザイナーを目指すわけではないので本格的に勉強をしたわけではなく、知識として本を読んだ程度です。

使用したのはこちらの本!!
デザインの本としては有名なものらしいので、こちらを選択しました。

読むだけでも、身の回りのデザインがどうなっているかとか意識したりするようになりました!
知識としてあって損はないので、ぜひ読んでみることをおすすめします。

参考デザインの選択

知識を付けたので、続いて参考になるWebデザインを探します。
一から全部作るのは難しいので、色んなサイトの気に入ったところをパクります!笑

私がデザインの参考を探すのよく使うサイトはこちら


https://www.awwwards.com/
世界のデザインが見れるサイト。(ただし、レベルは高い)


http://muuuuu.org/
比較的よく使う。カテゴリー別に見られるのが便利


https://www.pinterest.jp/
大好きピンタレスト。見ているだけで楽しい

私は、デザインを探すときはほとんどピンタレストを使っています!!
これらを使って、自分がいいなと思うデザインを集めて、ページのキャプチャーを撮ります。

今回、私が参考に選んだのはhakoniwaというwebマガジンです。
http://www.haconiwa-mag.com/

PC、スマホデザインの両方のキャプチャーを撮って、XDに貼ります。

デザイン開始

キャプチャーした画像を横に置き、模写しつつアレンジを加えてワイヤーフレームを作りました。

うーん。。。
シンプルでこれはこれで良いんだけど、なんか普通でつまらんな〜
メインがあって、横にサイドバーが来る2カラムはブログの定番レイアウトだけど、せっかくだからちょっと変えてみよう!

ってことで、再度やり直し。

思い切ってシングルレイアウトへ変更しました。

ブログっぽくないデザインが、なかかなか良いんじゃないでしょうか!
自由に生きるがテーマなので、気球のキービジュアルを入れて空に飛び立つ感じで自由を表現!!

とまあ、しばらくは気に入っていたのですが、
着物をちょっと推したいからもう少し和風要素を入れたいなと思い立ち、配色を変更することに。

配色探しはピンタレストがとても役立ちます。

好きな赤色をアクセントに入れて、グリーンが気に入ったのでこんな感じを参考に

もはや和風要素を見失ったので、最終的に桜をキービジュアルに入れて無理やり和風感を出しました。笑
記事ページのデザインも作って、これで完成!!

次回はコーディングに入ります!

つづく

ABOUT ME
アヤカ
元メーカーOL。プログラミングに出会ったことをきっかけにIT業界へ転職。SES、コーダー、Webディレクターなどを経験し2018年秋、会社を退職し、現在は神奈川を拠点にフリーランスWebエンジニアとして活動中。 趣味は着物を着ること、写真撮影、手芸。神社、お寺、落語などなど和風ものが好き。