今回、初めてWordPressを使ってブログを立ち上げましたが、エンジニアの私が初めてブログのデザインを考える上で気をつけたことをまとめてみました。
ブログに対する想いを明確にする
ブログを立ち上げるにあたって、改めていろいろ考えたときに誰に向けて書こうかと考えました。
読んでくださった方に、なにか「レッツトライ！」してみたくなるブログにしたい。
これは前のブログと変わらない気持ちでした。加えて、私には、この2つの想いがあります。
イラストレーターとして力をつけたい。
エンジニアとしてのノウハウをためていきたい。
ブログに対する想いを明確にすることで、デザインも配色も決めやすかったです。
ブログのデザイン
これらの想いを実現するには、イラスト・写真・ソースコードが映えるようにシンプルなデザインにすればいいのでは、と考えました。
ブログを書くことには多少慣れているものの、WordPressは初心者です。phpは学生の頃に卒論用のWebアプリケーション制作で使っていたぐらい。JavaでWebアプリケーションを作っているとはいえ、デザインもまだまだ経験不足です。
はじめっから全部をひとりでやるということは難しい。だったら、ちょっとだけハードルを下げる方法を考えました。
WordPressテーマを選ぶ
SEO対策や広告などはテーマに任せつつも、カスタマイズができるWordPressのテーマ利用することにしました。いろいろ探してみて「Stringer5」を選ぶことにしました。制作者の ENJIさん( @ENJILOG)、本当にありがとうございます！
「Stringer5」のカスタマイズはこちらのサイトをとても参考にさせていただきました。カスタマイズはここから調べたといっても過言ではないくらい、多くのTipsが乗っています。
シンプルなテーマで「Simplicity」もおすすめですよ！
配色で使う色は少なく
配色はかなり気をつかいました。イラスト描くときでも気をつかいますが、Webデザインとはやっぱり感覚が異なるので…。改めて、配色の考え方も改めて勉強させていただきました。以下のリンクは個人的に、とてもわかりやすかったです。
あと、イラストや写真を多めに使うのであれば、他の要素はできる限り色相を抑えたほうがいいのかなと思いました。このブログで使用するのはメインの色は4色で、あとは明度(透明度)で調整するようにしました。素敵な配色がたくさんあった下の記事を参考にさせていただきました。
エディタツールはいろいろ触ってみて「Brackets」
エディタツールは今後のカスタマイズや投稿のメモなど深くかかわりがあるので、改めてツールを探し。いろいろ試してみて「Brackets」に落ち着きました。
ダウンロードすれば、日本語で使用できること、ライブプレビュー機能があるのに無料で利用できます。特に、ライブプレビュー機能はものすごい助かりましたね。ソースコードを書きながら、レイアウト、デザインを確認していくことができました。
Bracketsはエクステンション（拡張機能）を入れることで、さらにコーディングがとてもやりやすくなります。エクステンションは以下を参考にしました。
あと、「Emmet」がすごくいい！すっごい便利！ここまで早く書けるものなんだ！って感動しました。この記事読むだけでも、「Emmet」のすごさを感じちゃいます。
そして、今、こうしてブログ記事を書くまでに来ることができました。
実は、ブログは開設してからが本番
無料ブログをやっていても感じたことですが、運営してみてわかることがあることが多いです。開設しただけではブログのデザインは終わりではないんですよね。
ちょっとした崩れがあったり、不具合を見つけたら修正が必要です。ここ数日でも気になったところをちょこちょこ手直ししています。それにWebの技術が進化するのが早いので、定期的に見直して反映させることが大事です。
まとめ
以上、エンジニアが初めてWordPressを使ってブログのデザインをつくるときに気をつけたことでした。私のブログも定期的に見直してしたことは記事を書いておきたいと思っています。これからブログをする方の手助けになればうれしいです。
