サイト作るよ03-PCデザイン

前回はスマホのワイヤーを作りました。次はビジュアルを考えてみます。
前回のリンクを貼るのが面倒になりそうだったけど、ないとちんぷんかんぷんになりそうだったのでカテゴリリンクを作りました。

構成が固まったらいきなりhtmlを触るのではなく、先にお絵かきソフトなどでできあがりを想定した画面デザインを綺麗に作ってしまった方が後々作業しやすいです。
画面の実寸大でサイトデザインを作っちゃいましょう。
前回引いたPCワイヤーはこんな感じ。

作りました。

はあ~~リクたん可愛すぎか。
水面下の創作で作ろうかとも思ったけど綺麗な絵がなかったので、以前飼っていた最愛のコーギーさんで適当に作りました。

このブログ、別タブ設定をするとライトボックスが立ち上がるようにしてしまっているので原寸大で見たい方はお手数ですが右クリックから別タブで開いてみてください。

コンテンツ幅を1000pxとして、左右に余裕を持たせる意味で1300px幅のキャンバスにしています。セクションごとに背景を分けると「ここから違う項目だよ」というのがわかりやすく、デザイン的にも楽に変化が付けられるのでよく使われる手です。

本文サイズですが、webのデフォルト(1emと呼ばれる)は16pxです。大きいと思えば本文14pxくらいまでならよくあるかな…それより小さいと見づらいです。

おまけ

犬の親バカページでは雰囲気掴めない…という気がしてきたので例えばこんな感じとかどうですか。という例を同じワイヤーで作ってみました。(リンクはいらないなと思って端折りました)

テキストはダミーです。
団子はおやつでもありまたメインディッシュでもあるのです。我が家の裏番長曰く。

GARD後半ページ、 作りたいけどはじめからネタバレになるので表側には出せないし… つまりは見ていただける方もすごく限られるし…というところでサイト移転してからはまだ作ってないです。

ツァイトがやっと主人公に昇格できたのでメインカラーは黒で。昼だったのが夜になってじきに朝が来るよ的なイメージでぴゃっと作りました。メインビジュアルらくがきじゃないか…とかそういうのは大目にみてください。デザイン描いたら作りたくなってきたのでその内時間ができればこんな感じで作ろ…

ワイヤーと違ってもOK

基本的にはワイヤーに沿ってデザインしますが、作りながら細かい配置とかは見栄えがよいように変えます。

ギャラリー部分は簡素すぎたのでピックアップ写真を並べて、ボタン押して次のページに行かなくても内容がチラ見できるようにしてみました。
ただリンクボタンがあるだけよりもいくつかサムネイルがあった方が「もっとリクたんの写真見たい!」と…思うはず。

ワイヤーは大事だけど、ワイヤーに囚われすぎず自由に作ればいいんです。

SNSアイコンには気を付ける

フッターにあるTwitterとPixivのアイコンについて。

本当はフッター全体を緑でベタ塗りにして、アイコンはどちらも白抜きのものを置けば色相が統一できるだろうと思っていたのですがアイコンをDLしに行ってみるとPixivアイコンは「色を変えるな」と書いてありました。

「わざわざ用意してないけどアイコンも白にしていいよ」とは書いていないので、よその素材を使う時には規約として書いてあることだけするようにします。ルールからはずれていたら大変なことです。

オンマウス時の挙動もなんとなく考える

クリックできる範囲はオンマウスでなにかしら見た目が変わった方が「ここはクリックできる!」と認識されやすいです。
このボタンはマウスカーソルを当てた時こう変化させよう。とか、なんとなく想像しておけるといいです。

コピーライトどうする?

コピーライトというのは著作権表示で、よくサイトの一番下に小さく書いてあるアレです。正直なところこれはあってもなくても何の問題もないです。

なくても基本的に著作権は守られますし、書いていれば真似されないのかと言われると別にそうでもないです。個人的にはフッターに小さい英文が一行入ると画面が締まるので好きです。

ただ文の最後に「All Rights Reserved.」とよく書かれますがこれは厳密に言うと意味があって、「このサイトにあるものは全部私が作ったものだからな」みたいなことを言っています。

これ、サイトの中にどこかから借りてきた素材とかが1つでもあれば書かないのが正しいとされているそうです。例えば、

  • フリー写真を背景に使う(フリー素材でもそれを自分のものと言い張ってよい権利などないのです)
  • Twitterのアイコン使う
  • 文章は引用元がある
  • webからかわいいフォント持ってきた
  • スライダーやライトボックスのプラグインを使う
  • よそのサイトのバナーを貼る
  • サイトを誰かに作ってもらった

などなど。
でも創作サイトなら100%自分で作る例もなくはない気がするし、ベンダー業界の中でもあまり一般的なルールではないようなので気にしなくてもいいです。

結論、書くの?書かないの?と言われれば、書かないです。

次はスマホデザインも作るよ

次回はスマホ版のデザインも作っちゃいましょう。
コーディングまではする気ない場合でも、ここまでだけでも作るの楽しいですよ~。