絵のようなページを目指します RWDでも

「思い通り」を表したくて、
ウェブサイトを自作&デザインしています。

とくに大切にしているのが、
トップページの第一印象です。

ページを訪問いただいた方に
楽しんでいただこうと心を砕いています。

その最新の試み(注:これを書いた時点)を、
今回は「試しました」として、ご案内します。

舞台は、わたしの電子書籍
『いろは歌留多でマーケティング』の
作品サイト。そこでのチャレンジです。

このサイト、トップページを開くと
『いろは…』の表紙が最初にポンと現れます。

 

『いろは歌留多でマーケティング』著者・矢嶋剛。

この画像は、訪問いただいた方に
「このページで間違いない!」と安心いただく
サインとして置いています。

しかし、第一印象として十分ではありません。

本の表紙は、
公式サイトやamazon・kindleのサイト
既にご覧になっている可能性が高いからです。

むしろ、お知りになりたいのは、
「この作品が描く世界」のはずです。
ですから、その情報のメニューこそ
第一印象に相応しい。

さて、その情報を、どうやって仕立てるか?

悩んだ挙句、
一枚の絵として、一瞬でお見せする事に
決めました。

その完成形が以下の画像なのです。

9枚のタイルが縦3列横3列に並んでいます。それぞれの違うデザイン。全体が一枚の絵になるように組んであります。「いろは歌留多でマーケティング」の作品サイトからの抜き書きです。『絵のようなページを目指して』より。

この画像、
9枚のタイル(3x3)で
全体を構成しています。

その9枚が視覚的に
一枚の絵のような印象をもたらしてくれます。

この効果を念頭に、
わたしは9枚のタイルを描きました。

それぞれのタイルには、メッセージがあり、
読んで理解しやすい順番もあるのですが、
それを踏まえながら、全体を絵にしていく。

意識としては、ちぎり絵を描く感覚で。

これが意外と辛い作業でした。

眺めてみて、他ページからジャンプしてみて、
伝わってくる? 主旨から外れていない?を
自問自答し続け、

ダメなら、やり直し。
イラスト、描き直し。

それが何度も続きました。

ようやく「絵らしく」が見えたのは、
中段・左のイラストから
伸ばしていくように制作し始めてから。

こんな試行錯誤が、
わたしのウェブ制作です。

よかったら、実物を眺めてください。
 

  
追伸

スマートフォンでご覧になった方は
「えー、タイルが1列だよ!」に
なっていると思います。

そうなんです。リキッドタイプ(:画面が
小さくなると画像が下に回り込む)の
RWD(レスポンシブ・ウェブ・デザイン)を
採用したために、ディスプレイによって
タイルの配置が変わるんです。

もちろん1列でも、
3列のような気持ちで制作していますが、
印象は違ってしまいます。

すみません。
お手数ですが、機会があったら
PCで3列を眺めてください。

PC・3列には、
マウス・オーバーさせると表れる
裏タイルが隠れています。

実はこれも
第一印象の一部なのです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください