ポルカの日記 | CSSベースのHTMLレイアウト入門講座

媒体、ターゲット、トレンドなどの状況、またデザイナーによって、
選択されるフォントの選択や文字組の方法は変わると思うので、
あくまでもローカルルールについて、基本的なことを述べていきたい。
（テーマが壮大なので、今後も加筆・修正の予定）


最初に「見出し」と「本文」について考えてみる。

フォント選びは、単にどのフォントを使うかではなく、
字間・行間・段落の大きさ・本文と見出しの大きさの差といった
パラメータの設定も同時に必要となる。

それぞれのパラメータは最初から「これ」って決め込めたらいいのだけれど、
実際には、調整を繰り返しながらモアベターを追う感じで、
ある程度の決めごとをしておいてから、
文字組全体を意識しながら、試行錯誤もまじえつつ
テキストを配置しながらレイアウト作業の中盤位まで変化・調整を繰り返す。

印刷物やWEBなど、参考になるものがあれば
その共通項を探しながら、より相応しい表現を求めたいところだ。




ある程度の決めごとの指針とするのは、

１）ゴシック系か明朝系か。
まるっきりどちらかにするか、ハイブリッドにするか。
ハイブリッドにする場合はどちらの割合を多くするか。

２）本文と見出しの大きさ
本文の文字サイズを基本に、見出しのサイズを決めていくのだけれど
チラシのような、見た目のインパクトが必要な媒体の場合は
その差はとても大きく、また、一定サイズにならないことも多く
そういった数値で決めにくい場合は、
本文との大きさの差をどれくらいの段階をつけていくか、を考える。

３）ライトかヘビーか。
一般的には見出しは、太いフォントを使うけれど、
細いフォントを使って、あしらうこともある。
本文は可読性をどこまでもたせるか、がポイントになる。
とても細いフォントを使った本文だとしても、大きさが一定以上有れば良い選択になるかもしれない。
手書き文字のように、多少読みにくい文字でも、表現によっては相応しい選択になる。
ライトかヘビーかは、そのことだけを考えるのではなく、
２）の大きさと同時に考えることで、その時々の最適解へ近づきやすい。

先週あたりからFirefoxでjQueryがうまく動かない。
といっても、動かないライブラリがあるといったとこで、
100％動かないわけではない。

あやしいのは、「.load」を使っているときだけど、
これも断言しきれない。

on("load",function(){})で回避できたかな！？って
思える時もあったのだけれど、
何度か動作させてみると、やっぱりダメか、となってしまう。

最初からjQueryをFirefoxに読み込ませるっぽいアドオンがあったので
導入したら、ちょっとまえよりは改善したような感じだったけれど、
今朝更新しようと見たサイトでは、一部のライブラリが動いていなかった。

ただし、Mac版のみでWin版はいままで通り何も起きていない。

FirebugとかScreenGrabとか、
WEB制作で使い慣れたアドオンがあるので、
他のブラウザに鞍替えするのはつらい。

どうしたものだろうと、今は思案中。
何か分かれば、ここに書き込んでいこうと思う。

＜2014.11.04＞
いまだ一部のjQueryが動作しない。（ライブラリと自作の両方）
Firefoxを再起動すると動作するので、キャッシュがあやしいのかも？？

通常、キャッチコピーや文章を作成するときは、
暑苦しく迫ってくるような感じになるのを避けている。

それは、文章だけでなく，デザインについても言えることだろうと思うけれど、
短いながらも営業の経験があることに大きく影響されていると思う。



良さを分かって頂くためには
初対面で相手の立場から考えることが難しい状態であっても、
とりあえず話しを聞いて頂かないと、文字通り話にならない。

最初から主張が強すぎると、
相手が聞く態勢になる遙か手前でシャットアウト。門前払い。

興味を持って頂けるように、
シンプルで控えめに、楽しく語ることが好ましい。



自分のウリを明確にすることは大切だけれど、
相手の立場をおもんばかる控えめな態度、
それに、相手の話を聞ける態勢があると感じて貰えるだけの余裕さがないと、
入口は開かれない。当然、理解なんてされるはずもない。

それどころか、悪い印象を残してしまって、
次からはマイナススタートだ。




当方自身、最初何しゃべっていたか分からなくなる枝葉トークになりやすく、
自分のことを話すのがとっても大好きな暑苦しい奴だ。

けれど、広く世間に知らしめる必要がある表現＝広告となると別。

自分のこと、自分の側からのことばっかり言う営業からは
誰も買わないだろうってことはわかっている。




好感がもてる広告用表現とは、以下のようなものだと思っている。
似たような事柄をあげているなぁと思うけれど^.^;

１）控えめ。
２）表現する側のまごころを感じる。
３）押しつけ、自慢話は論外。
４）売りつけようとしていない。
５）信憑性のあるデータや実績・経験に裏打ちされている。
６）数字のマジックを極端に使っていない。
７）クスっと笑える。


折込チラシや、ランディングページのように、キャッチーにするために、
暑苦しい（かもしれない）表現を意図的にとるケースもあるけれど、
全体を通して「控えめで、配慮を感じる、見て読んで楽しい」表現を
基本においていきたい、と思う。

作業は効率的にするのが一番。
その効率も回数を重ねる事に上がると尚良し。

最初に苦労して道を作ってるのだから、
二回目、三回目と通りやすくなってるのは当たり前。

でも、いくつかルート候補になるポイントがあって、
どの候補を選ぶか、という段階であれば、
一見めんどうくさそうで、難しそうな方を選ぶ。
（時間との兼ね合いは大きいけれど）



面倒くさいことにトライすると、
答えに近づきやすいことが、経験則で分かっている。



プチな天の邪鬼は、独自性を保つのに必要。

あんまり人がこないところを選んで進めば、
まねしごんぼになりにくいし、競争相手も少ない。
それに、何度も繰り返しトライすることになって忘れにくい。
いいことづくし。




もちろん、たんなる時間の無駄に見える結果に終わることは多いけれど、
無駄ではないことも分かっている。

試行錯誤の数を増やせば増やすほど、
駄目な方法が分かってくるし、
思考の組み合わせバリエーションも増えて、
当初思ってもみなかったような、適当でいい塩梅の答えができあがる。

答えが妙であっても、
ゴールした先が許容範囲に収まっていれば、それで解決！




この一連の流れがスムースであれば言うこと無しなんだろうけどなぁ。

ノリノリな気分の時と、
そうでないときの落差をどう縮めるか、ってことには
まだ答えらしきものは出せてない。

多分、ラクを選んでしまってるんだろうな。

画像の呼び出し方について。

v.1.7.3以前からSOY CMSを使っている場合
結構大きなSOYタグの変更。

テンプレートで画像呼び出し使っているときは要注意。
バージョンアップしたら画像が表示されない！　なんてならないように、
事前の準備要！！！


v.1.7.3以前（だったと思う）は
<img src="<!-- cms:id='**********' /-->" />
とか
<!-- cms:id="**********" --><img><!-- /cms:id="**********" -->
でOKだったけれど、

v.1.7.4以降（だったと思うは
<img>内に剥き出しでcms:id="**********"を書き込むようにする。
例：
<img cms:id="**********" />


その他、1.7.3以前→1.7.4以降のバージョンアップで画像関連の注意（結構あせる）

１）jQueryでスライドショーをしていて、スクリプト内に
カスタムフィールドの画像を呼び出しをしているときは、
本文（cms:id="content"）に画像のパスを記述して、本文呼び出しに変更して回避。
→タグの中でにしか、cms:id=""の呼び出しが反応しなくなっているようなので、
スクリプトと連動させている場合は要注意！

２）<img>内に記述しているジャバスクリプト（onload）が正しく認識されず、画面上に残骸が表示された。
記述をから消して、jQueryで指定して動かす方が無難そう。
※カスタムフィールドの属性指定でonloadを入れて使ったら、もしかするといけるのかも？？

３）カスタムフィールドの画像登録で「http://******.**.**」から始まる絶対パスで登録している場合は、
「/」で始まるルートパスに変える必要があるかも。
→記事編集画面で「http://******.**.**/http://******.**.**/画像のパスはありません」的な警告がでる。
※バージョンアップ後に新規に登録した記事だと、画像カスタムフィールドには絶対パスで登録（表示）されていたので、もう一度画像をアップロードする方法もいいかもしれない。