M5GF

まったり開発ブログ

ワイヤーフレームを作る(Wordpressでブログテーマを作ろう日記4日目)

どうも、岐阜です;)

 

Wordpressでブログテーマ作ろう日記4日目です。気がつけば大晦日ですね...もっとスピードあげていこう

 

昨日はFTPクライアントソフトCyberduckの導入をしました。

 

いよいよブログデザインに入っていきます!!

 

現在はスターターテーマであるBonesを導入したまっさらな段階です。

f:id:ata-ata:20171231134505p:plain

 


 

やっていくぞ!!

 

 

ワイヤーフレームについて

 

色々調べていると、サイトのデザインをする前に、設計をしっかりやってからのほうがいいという言説をよく目にします。個人のブログなのでそこまでしなくてもいいと思われるかもしれないけど、今回は勉強も兼ねてるのでやっていきましょう。

 

 

何を決めるためのワイヤーフレームかを明確に定義する

自分の場合これから作るのは個人のブログサイトで、サイト全体の統一した基本画面構成を定義するためにワイヤーフレームを作ります。

 

入り口は「ユーザーの知りたいこと」、出口は「企業の伝えたいこと」

 自分の伝えたいことを連呼してもユーザーからしたら「お、おう」としかならない。「こんなことがしたい、というあなたはこちら!」→「それに適した情報はこれ!」というアプローチが必要。

 

自分の場合、「暮らしを改善してQOLを高める」方法について書くブログにしたいと考えています。

ユーザーが求めるものについて考えると、「欲しいものがあるがまだ検討している」「休みの日の過ごし方がわからない」という人に「こういうアイテムを導入したらめっちゃ便利になったよ!」とか「ここに小旅行したらまったりできたよ!」というアプローチがしたい。

視認性を高めて、一番目立つようにするために、記事タイトルは大きめに設定しようかな。

 

 

ワイヤーフレームを作る

 

今回はオンラインで図表作成ができるcacooというWebサービスを利用しました。

 

もう既にブログ用のテンプレートがあるので、ドラッグ&ドロップで微調整して簡単に作成できました。

無料で6プロジェクトまで作成でき、png形式でエクスポートができます。

 

 

f:id:ata-ata:20171231145022p:plain

 

今回はこんな感じにしてみようと思います。2カラムの割と簡素なデザインですね。アイキャッチ画像と記事名をでかくしました

あとはヘッダーを動く仕様にして差別化、目の引くデザインにしたいなぁ…

 

 

とりあえず今日もここまで!!

読んでくれてサンキュー!!