紙面レイアウトの素敵なところをwebに活かしたい!

紙面レイアウトの素敵なところをwebに活かしたい!

レイアウト参考静岡の西部地域から愛知の東部地域に配布されているフリーマガジン「住まいラボ」。

このフリーマガジンを見てて目に止まったデザインというかレイアウトを、後学のために、うまくwebにも生かせないかなということで勉強してみることにしました。画像が目に止まったレイアウトを自分なりに分割してみたものです。
紙面デザインはやっぱりwebデザインとは違うなと思いつつ、全体の構成を見ていきます。

ホワイトベースのデザイン

この紙面デザインは、白と黒をベースにしてあります。

スキャンなので正確な色合いは出ないのですが、一番上のヘッダー帯の部分は#5C5D55でした。CMYKで出力されたものをスキャンしてRGBってよく考えなくても、全然正確性がないっすねぇ。タイトルは#696B6Aです。文字色は黒。キャッチの部分は#4B5D82でした。

写真と地図以外で他の色は使わないという感じ?

テキスト部分のノートっぽい下線

これ、いいと思うんですけど、webでやるにはどうすればいいのかな。
<p>~</p>にスタイル設定しても、ブロック単位だからブロックの下にしか線がでてこないし。インラインでやらなきゃいけないから、<span>~</span>に設定すればいいのかな。

できそうな気がしたので、実際に設定してみます。

光輝は力の活動穴館を眼がそろえ赤ました。ではこんこん生意気ですたという頭なだ。生意気ましましのたはたまた足の勝手げのうちがもねから生意気ましずて、やつなど赤で済んれんうです。
出しすぎ何も手を手早くたて前の象のうしめになっ第一舞台汁のおじぎに弾きていましです。みみずくもこんど云いといるた。
小麦は一かえれ先生のようへ見からしまうまい。間はゴーシュむのくらいしかないのでとあなたで怒るがしまうた。

(実際はインラインでスタイルを設定しています)

んー、やってみたけど、やっぱり紙面デザインみたいに綺麗にノートっぽくはならなかったです。
残念!!


Back to Top