ワイヤーフレーム制作

ワイヤーフレームってなぁに

ワイヤーフレームとは、簡単に言えば骨組みです。
ボタンの配置やテキスト量や画像など、どこに何をどう置くか＆リンクはどこでどう繋げるか、といった設計図のようなものです。
ここをしっかりしておかないと、いざ作った時に辻褄が合わなくなったり使いにくいサイトに仕上がってしまいます。
非常に頭を使う作業ですね！
そしてお気付きでしょうか。ここまでデザインに全く入っていません。
イメージとなるパーツをなんとな〜く起こしてみました、程度です。
デザイン作業に入るまでに実はかなりの工程を経ていることがお分かりいただけると思います。
そんな訳で、まだデザインに入りません。笑

私はまず手書きで考える方がやりやすいので(ほとんどの同業者さんもそうなのかな？？)、コピー用紙にばーっと書きます。
何事も手で書くことからスタートして、その後に清書する感覚ですね。
この手書き段階のワイヤーは、よく夜に作業しています。
実は結構頭を使う工程なので、個人的には夜の方が集中して進められます。

TOP・かんそうノート

★本当の本当に設計ラフなので、字がたいへん汚いですがご容赦ください

イメージがそこそこ浮かんでるものについては簡易ラフも書いてますね。
そのほか、こうしようかな？と検討したい部分や重要な部分はアレコレ横にメモ書きしていきます。
かんそうノートの一覧では画像を付けたいなと思ったものの、ライブ・イベントは購入したグッズやチケットなどの写真を使えたとしても、映画・海外ドラマレビューの場合はどうしようか？というような"運営上の懸念点"についてもここで考えます。
結論としては、「映画・海外ドラマレビューの場合はフォーマット(フレーム？)を決めてタイトルをペンタブで手書き」となりました。
ただしこれが最終決定ではなく、デザインをしていくなかで最善の方法が見つかればそちらに舵を切ることも有り得ます。

kRoco. greeting ページ

コーディング時に画像対応なのかCSSで再現可能なのかを考えて、その時浮かんだ方法もあわせてメモしたりします。
こちらは画像にナナメラインのシャドウ？をつける時にどうするか、という内容です。
「afterでいける？」というのは、CSSの擬似要素"after"を使えばいいのかな？？という疑問形のメモ書き。笑
CSSでいけるとしても、CSSにする必要があるのか？シャドウ含め画像対応でも問題ないのでは？といった事も考えていきます。
現時点ではどちらで対応するか決まっていません。

ちしま家てちょう・書く。

「ちしま家てちょう」は記事というよりも写真ベースのものなので、個別の記事ページを作らないことにしました。
クリックでモーダルウィンドウ表示を想定しています。
「書く。」ではMV(メインビジュアル)がふと浮かんだので軽く描いてみてます。
ほんとうにこれになるかは分かりませんが…！
一覧時の各ボタンラフ(2020- タイトル、と書いてある部分)がありますが、案出し段階で「ズラさない！！」というベースの考えがあったのでボツです。
そもそもこの形にしてしまっては、全体の雰囲気やコンセプトには合いません。
書いてて即、「ちがうな！」と思いました。

全ページの手書きワイヤーを書き終えたら

と、こんな感じに全ページ分の手書きワイヤーを書きました。
こうして振り返ってみると…まだどこかざっくりしてる感じが否めない。笑
次は、いよいよデジタル領域にがっつり入ります！
AdobeXDでワイヤーフレームを！！作ります！！！