カスタム仕様(1) - ポエツ | poets

Logs

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
■4つの主題
カスタマイズとは、身の丈に仕立て直すことと見つけたり。
…であれば、自分のサイトはカスタムスキンが最も最適化されている道理なんだけど。

もう実装できる状態になって来ていると思いますが、使う気になりません。見やすく仕上がっているはず、特に『ポエツ』には特化されているはず、なんですが、…やっぱり作家さんの作った共有スキンのほうがええがな。『chameleon』とかのままでええがな。と思ってしまうこの頃。


「メニュー上部配置」以外に採用した仕様と、その他カスタムに際してこだわった点などを記述します。

まず、大きく分けて4分野の主題を持っています。

1)機能性・利便性
「機能」というのは、メニューの折り畳みなどに代表される、
javascriptや独自変数を用いたギミックのことです。
この機能によって向上させたい「利便性」の第一にあるのは、
「ページの遷移やスクロールの距離を減らす」(=1画面内にできるだけ収める)ことです。
現時点では、「気づいた機能は入れてみた」感があり、不必要なもの、コンフリクトしているものの整理ができていない気がします。
javascriptは自分で組めないので「折り畳み」以外には使用していません。

2)外観(意匠)
敢えて「デザイン」と表記しなかったのは以下の理由です。
たまにこんな言葉を耳にすることがありませんか?
「これ、デザインに懲りすぎていて使いにくいんだよね」なんて言葉。

デザイン(見た目)を重視して、使い勝手を犠牲にしてしまうことはあります。たしかに服などにはよくありそうです。Appleの近年の伝説機種 『Cube』なんて好い例かもしれません。
私の分野のエディトリアルだと「可読性」の問題がそうです。文字は大きく、コントラストが高い方が基本的には読みやすいとされるのですが、小さな字や、淡い配色のほうがオシャレに見える時もあるわけです。

しかし「デザイン(設計)」という言葉には、本来、使い勝手のよさ(機能性)までもが含まれて然りです。特に工業デザインなどはそうでしょう。2)の項目を「外観(意匠)」としたのは、デザインのうち「見た目」の要素ということです。

3)使い勝手
2)で述べた「デザイン」に含まれる、もう一要素です。必ずしも「外観のよさ」と「使いやすさ」は相容れないわけではないと思います。むしろ合理的なものは美しいことのほうが多いのです。
スキンでは、主にボタンやステータスなどの配置のことを指しています。ただwebには、web特有のリテラシーというか、文法(HTMLのことではなく)があって、専門外なので知らないことが多いです。
一例を挙げれば、「リンクがかかっている個所や、クリックで動作する部分は、それと分かるようにする」などですが、この辺は配慮ができていないと思います。

4)視線の誘導
スキンを自作したいと思った動機のうち、最も大きい理由です。
前述の「可読性」と重なる部分もありますが、少し違います。

webでは、閲覧環境によって表示のされ方が一定ではないので、デザインや可読性を普遍化できない部分はあります。可読性は主に、配色・文字サイズ・書体・一行字数・文字間・行間などの要素からなるのですが、それほど遜色ないスキンも多いです。

私がいまひとつ不満に思っていたのは「視線の誘導」です。
これは前節『3カラムズ・ブルーズ』で述べましたが、


これは感覚的なことですが、文章は左から右に読むので、本文の後さらに右側にメニューが並ぶ「右」型では、視線が記事を超えて跳び込んでしまうような感じがするのです。


主観性(好み)に左右される気もするのですが、こういった類いのことです。
他には記事タイトル部分のデザインが不適当なのも目に付きます。記事タイトルが「弱い」場合が多いです。これは雑誌でも同じですが、タイトル(見出し)部分をぱっと読ませておいて、記事本文へ誘導させたいのです。なぜかブログでは、この部分のデザインが弱いと思っていました。
冒頭でタイトル(見出し)がその1エントリを、きゅっと括り上げているイメージがあるので、ここが弱いと閉まりがなくなります。かといって強すぎたり、本文から距離が空いていたりすると、本文へ移行するのに、「ガクン」と段差に落ちるようで流れを阻害します。

それから各記事(エントリ)と記事の「間」です。空きすぎていると、次の記事へのリズムが中断してしまいます。かといって各記事の境界がはっきりしないのも、どこで1記事が始まって終わっているのか分かりづらく落ち着きません。

本文よりナビゲーションが目立つことは問題です。
「映画館で、『非常口』という緑のライトが光っているのがうるさくないか?」と以前書きました。確かに「誘導灯」は光っていてナンボなのですが、「ナビゲーション」は使う際に「こちらから探しに行く」ので、画面上で目に跳び込んでくるほど強い主張は必要ありません。


共有テンプレート『print』などは比較的好例です。
まず記事タイトルの視線の牽引。各記事を囲むことで領域が明確になって、視線が分散しません。その囲み枠は白なので、枠自体がうるさくもならない。ナビ項目は少しコントラストが強いけども青地に青文字なので刺激は緩和されています。
print.jpg


スキン『turn-blue』、『turn-gray』は、罫線と、シロヌキ文字の載った帯によって各セクションを括ることで、まとまりと各部の独立性を高めています。javascriptによって交互に配される色がそれを助長しています(たぶんscript-offでも充分なデザイン)。
お手本にしたいデザインです。
実装例:『turn-blue』

また公式テンプレート『panorama』ですが、これだけ鮮やかな色を使いながら、記事本文への誘導と可読性を充分に持っています。配色の妙と言うのでしょうか。ナビゲーションも黄色地にオレンジの配色のせいか、さほど目立ちません。画像を投稿するには、さすがに向いていないかもしれませんが、長文を読ませるサイトでも使用に耐えそう。
panorama.jpg


[カテゴリ]*blog-logy*自家用デザイン

trackback

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。