レッツトライ!しもしも

エンジニアときどきイラストレーターのしもしもがレッツトライ!したことを描くブログ

エンジニアが初めてWordPressを使ってブログのデザインをつくるときに気をつけたこと

      2017/03/16

今回、初めてWordPressを使ってブログを立ち上げましたが、エンジニアの私が初めてブログのデザインを考える上で気をつけたことをまとめてみました。

ブログに対する想いを明確にする

ブログを立ち上げるにあたって、改めていろいろ考えたときに誰に向けて書こうかと考えました。

読んでくださった方に、なにか「レッツトライ!」してみたくなるブログにしたい。

これは前のブログと変わらない気持ちでした。加えて、私には、この2つの想いがあります。

イラストレーターとして力をつけたい。
エンジニアとしてのノウハウをためていきたい。

ブログに対する想いを明確にすることで、デザインも配色も決めやすかったです。

ブログのデザイン

これらの想いを実現するには、イラスト・写真・ソースコードが映えるようにシンプルなデザインにすればいいのでは、と考えました。

ブログを書くことには多少慣れているものの、WordPressは初心者です。phpは学生の頃に卒論用のWebアプリケーション制作で使っていたぐらい。JavaでWebアプリケーションを作っているとはいえ、デザインもまだまだ経験不足です。
はじめっから全部をひとりでやるということは難しい。だったら、ちょっとだけハードルを下げる方法を考えました。

WordPressテーマを選ぶ

SEO対策や広告などはテーマに任せつつも、カスタマイズができるWordPressのテーマ利用することにしました。いろいろ探してみて「Stringer5」を選ぶことにしました。制作者の ENJIさん( @ENJILOG )、本当にありがとうございます!

STINGER5 – WordPressのはじめ方や使い方

現在は4GやWiMAX2+など動画閲覧などにも支障のないハイスピードのポケットWifiがたくさん選べるようになりました。それだけに種類も多く、比較するにも何を基準にすればいいのかわかなりにくいという方も多いと思います。「月額が安いと思ったら端末料金や初期費用が高かった!」「繋がりにくい!遅い!」などという失敗をしない為にも、モバイルルーターとはどういう物で何を基準に比較をするべきなのかを知っ…

「Stringer5」のカスタマイズはこちらのサイトをとても参考にさせていただきました。カスタマイズはここから調べたといっても過言ではないくらい、多くのTipsが乗っています。

シンプルなテーマで「Simplicity」もおすすめですよ!

配色で使う色は少なく

配色はかなり気をつかいました。イラスト描くときでも気をつかいますが、Webデザインとはやっぱり感覚が異なるので…。改めて、配色の考え方も改めて勉強させていただきました。以下のリンクは個人的に、とてもわかりやすかったです。

ノンデザイナーのための配色理論

わたくし おばら つかさ 渋谷でSAUCER(ソーサー)という名前でフリー@saucerjp のデザイナをしています。 紙媒体からデザイン業界に入り、ずーっと紙 のデザインだけをしていましたが、ここ5, 6年…

あと、イラストや写真を多めに使うのであれば、他の要素はできる限り色相を抑えたほうがいいのかなと思いました。このブログで使用するのはメインの色は4色で、あとは明度(透明度)で調整するようにしました。素敵な配色がたくさんあった下の記事を参考にさせていただきました。

エディタツールはいろいろ触ってみて「Brackets」

エディタツールは今後のカスタマイズや投稿のメモなど深くかかわりがあるので、改めてツールを探し。いろいろ試してみて「Brackets」に落ち着きました。
ダウンロードすれば、日本語で使用できること、ライブプレビュー機能があるのに無料で利用できます。特に、ライブプレビュー機能はものすごい助かりましたね。ソースコードを書きながら、レイアウト、デザインを確認していくことができました。

A modern, open source code editor that understands web design

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it’s like getting presents all year long.

Bracketsはエクステンション(拡張機能)を入れることで、さらにコーディングがとてもやりやすくなります。エクステンションは以下を参考にしました。

あと、「Emmet」がすごくいい!すっごい便利!ここまで早く書けるものなんだ!って感動しました。この記事読むだけでも、「Emmet」のすごさを感じちゃいます。

そして、今、こうしてブログ記事を書くまでに来ることができました。

実は、ブログは開設してからが本番

無料ブログをやっていても感じたことですが、運営してみてわかることがあることが多いです。開設しただけではブログのデザインは終わりではないんですよね。
ちょっとした崩れがあったり、不具合を見つけたら修正が必要です。ここ数日でも気になったところをちょこちょこ手直ししています。それにWebの技術が進化するのが早いので、定期的に見直して反映させることが大事です。

まとめ

以上、エンジニアが初めてWordPressを使ってブログのデザインをつくるときに気をつけたことでした。私のブログも定期的に見直してしたことは記事を書いておきたいと思っています。これからブログをする方の手助けになればうれしいです。

シェアする

 - Blog, Tips , , , ,