こんにちは、ワタナベです！
年末年始に体調を崩したせいでガンプラの塗装がまだ出来ていませんッッ(ToT)
完成公開はもうしばしお待ちください…！
今回はデザインのことについて書きます(｀・ω・´)ゞ
サイトのデザインをする際に、素材が少なく、これで１ページ作るのは無理があるのでは？と思うことがありますね。
でも、それでも、出来るだけ良いページを作りたい…
そんな危機的な状況の中(笑)、学んだことをゆる～くアウトプットしていきたいと思います。
今回は、テキストが少ない編をお送りいたします。
少ない素材で１ページデザインする【テキストが少ない編】
例えば以下のような素材をもらって1ページ依頼されたとします（すごく極端な例です）
↑架空の情報です。（念のため笑)
水族館といえばイルカショー！と真っ先に思い浮かぶコンテンツの１つなのに素材少なすぎ！、この情報量なら他のコンテンツとひとまとめにして紹介してしまったほうがいいのでは？という感じですが、それはおいておいて…
テキストが極端に少ない（短い）ですね。レイアウトによってはスクロールバーが出るまでもない感じになりそうです。
これをいかにボリューミーに魅力的に見せるかが勝負どころです。（ゴゴゴ…）
デザイン例
ヘッダーフッターなどは端折って中身だけ作りました。パパパと作ったやつなので雑なのは見逃してくだｓ
赤丸はこのデザインのポイントです。
それではそれぞれのポイントを見ていきましょう(/・ω・)/
①画像を大きく使ってみる
貰った素材の画像の質が良かった場合はそれを最大限に活用していきましょう。
フリー素材で合う画像があればそれでも大丈夫です。
最も伝えたい１文とかを一緒に添えるといい感じになります。
例では、極端にテキストが少なく、ここに素材唯一の文章を使ってしまうと他がスカスカになってしまうので、
英語のタイトルを大きく配置し、その下に日本語のタイトルを添える形にしました。
②フォントを大きく広く使ってみる
サイトのフォントサイズの標準が16pxだとして、テキストが少なくてスッカスカになってしまう場合、それよりも大きめのフォントサイズを指定しましょう。
目立たせたい部分はどんどん大きくすべし。
文字間、行間などもいい感じになるまで広げていきましょう。
あと、例のような長さのテキストの場合、真ん中寄せにしてしまったほうが見栄えが良いです(｀・ω・´)ゞ
③内容が切り替わる時に背景を付けてみる
これが便利で、結構スペースを稼いでくれますｗ
締まりがないように感じた時も使うと良いでしょう。
④横1列で並べられる要素をあえて縦並びにしてみる。
横並びにして、ページボリュームが少ないと感じた場合、2列にしてみたり、縦に1列にしてボリュームを稼ぐのもアリ。
例では、画像を大きめにとってさらに背景を付けてボリュームを出してます。
縦1列にする際は、画像を左右交互に配置するといい感じになります。（基本＆万能テク）
⑤強制的に素材の提供をお願いする。
明らかに少なすぎ…無理…、ここにテキストがあったほうがいいのでは？って思ったときは仮テキストを入れておいて、あとから提供してもらいましょう。（画像が無い時も然り）
例では、イルカそれぞれの説明？一言コメント？などがあればよいのではないかと思い仮テキストをいれています。ファンが出来るような一文が欲しいところですね…！！！
あとはショーの風景の写真があと何枚かあればいいかな～とか。その場の雰囲気が伝わると思うので。
このとき、最悪の状況を見越して、仮テキストが無くてもなんとかなるデザインにしておくと、素材がご用意頂けなかった場合のダメージが少なくてすみます(´;ω;｀)
ぶっちゃけこれって最初にするべきことなんですが、そう上手くことが運んでたらこんな苦労はしませんね。
⑥他のページへ誘導させるリンクを設置
例の場合は、イルカショーなので、ショーのスケジュールページへのリンクバナーをつけてみました。
あとは、ショー以外のコンテンツへの誘導などなど…
まあ、これは素材が無いとかページボリュームがどうとか関係なく付けるべきですね。。。
どこにリンクしたらいいかわからない時はサイト構成や他にどんなページがあるのかもう一度確認してみましょう。
※来場やお問い合わせを促す感じ（アクセスページへのリンクなど）のは、全ページ共通パーツに入れると思うのでここでは省きます。
【番外編】アニメーションをつける
めちゃくちゃシンプルなページでもこいつさえ上手く使えればなんとかなる。
可視範囲に来た時や、ホバーしたとき、常時………なんかアニメーションついてるとカッコイイよね…。
【番外編】貰った画像が小さくて大きく使えない時は…
①と同じで、
・内容にあったフリー素材で代用
②、③の
・テキストで攻める（埋める）
・背景で攻める（埋める）
あとは、もう素材としてこの画像が送られている時点でお察しかもしれませんが、ダメ元で⑤の
・仮で画像を当てといてもう少し大きい画像の提供を促す。
が有効かと。
フリーのイラストを使ったり、シェイプツールで図形など作って、空いたスペースを埋めるのも良いでしょう。
（複数使う、ちりばめて使う場合はテイストがバラバラにならないように注意）
【番外編】他サイト、競合サイトを見てみる
自分は行き詰まったり、悩んだりしたら、とりあえずいろんなサイトを巡ります。
デザイン面だけじゃなくて、「こういうこと書いてあるんだ～」とか、内容にも注目してみてください。
大いに参考になります。
…と、今の自分のレベルではこんな感じです。
今回は極端な例で作ってみて、ページボリュームは出せましたが内容がスッカスカなので(笑)、やっぱりテキスト素材は大事だと思いました…ｗ
私は、自分がコーディングで出来ると思うデザインしか極力やりたくないので、デザインの幅を広げるためにも、もうちょっとコーディング力を付けたいなと思います(;´Д｀)
それではまた次回。
次はガンプラを載せられることを祈って…
ご閲覧ありがとうございました。
