Designの最近のブログ記事

CMSと写真って意外と融合が大変。
これでも、まだまだ楽になっているのだろうけど、
画像とCMSでデザインが自由にできるCMSってのをテーマにいろいろと調べていると
WPでおもしろいプラグインとテーマがあった。



まずはテーマ
WP theme: Infinity | Vikiworks™ Studio

このテーマとカスタムフィールドを使ってサムネイルとタイトルを融合して表示する。

ほんでもってpicasa
picasa上の写真表示にPhotoXhibitを導入 « アスーカル・ITレビュー
上記のブログ投稿者の方もレビューしてますが、たしかにダイレクトに反映された方が楽ですよね。

で試してみた結果
wptest


※かなり雑なデモです。

そもそもWEB本来の機能として、こういったグリッドデザインしかできないっていう事から、いろいろとデザイナーやコーダーは考えながらデザインを起こすわけです。

最近でいう所のCSSコーディングやら、見出しがどうやらとかいろいろと現場やらメディアで騒がれているわけですが、部分部分の小技を教えられてもどうしようもない。

僕自身もWEBデザインに関わって、２年ほどでしかないが、もともとグラフィックの学校を出てたりするために、結構こういう事を考えるわけです。

かなり、中途半端ですが、グリッドのフォーマットを考えてみました。
最近の画面サイズの変更に伴い、ぎりぎりの領域で作成

・横幅980px
・メインビジュアルは、9分割法で作成
⇒それに伴ったページ内レイアウトと応用


自分の中でしかないのかもしれませんが、
こうやってシステム化していくにすればするほど、自由な表現と基本的な考え方（文字の読みやすさとか余白の考え方）を理解できますね。ホントに。

これが出来たら、コーディングのフォーマットやワイヤーフレームのフォーマット、fireworksのテンプレート、FLASHのテンプレートも作って一気に合理化デザインの出来上がりです。
あとはIAのやりかたやそもそも企画の内容って事になるわけなんでしょうね。
結局コンテンツだって事を証明したい。

http://show-hey.com/download/gridgrig53.png

サイトを作っていく中で、フォームってのは意外と軽視されている。
リアルのお申し込み用紙でも記入するのが面倒な訳で、
特にショッピングサイトなんかは、
フォームでユーザーの遷移が止まってしまうのは、死活問題である。

そこで様々な視点からフォームとコンバージョンの関係について考えてみた。

もちろん、面倒な作業が山盛りである
しかし、本気ならば、下記の対策をすると
きっと効果はあると思う。
一部主観だけのものはありますが・・・

ちなみに保険会社のフォームはどこも洗練されているものが多い。
好き嫌いは別にしてくださいね。

ORIX VIP LOAN CARD
PIPを使ったフォーム

資料請求（選択）｜アフラック公式保険商品サイト
商品情報とフォームが連動

といったところで細かい部分も含めていろいろと見てみよう！！

SECTION 1
必須項目について

「こんなに入力しないといけないのか？」

ふと考えてみると、お問い合わせフォームって何故か、

「※は必須項目です」
の記載が多い。
しかも見た目をすっきりとさせるために、
小さな文字で書かれている事が大半である。

POINT
気付かなければないものと同じ
かとといって、必須項目がいっぱいあるようでは
入力する気が失せてしまう。
枠で囲んだほうがどれが必須か分かりやすい。


▼対策
紙の申し込み用紙を見てみると、必須項目に※マークがついている申込用紙は少ない。
申し込み用紙の大半は必須項目を太枠で囲んでいる。
「これだけしか入力する場所はないですよ」の意味合いがあるわけである。

技術的裏づけ
CSS（ボーダーのプロパティ）
フォーマットさえつくっておけば、こんな事は容易である


SECTION 2
ウェブならではの課題

「そのスペースで住所が書けるのか？」

■サイズの問題
一般的に紙のお申し込み用紙を記入するシーンを想像してみよう。
僕が紙のデザインをしている時にある人に言われた事がある。
デザインが死んでいるフォームの中で一番多いのはこれだろう。

記入が小さいフォームは確かに結構ある。
それに加えて、僕の主観だが、最近フォームの文字サイズはでかい。
ちなみにこのサイトのフォームもでかい。

またフォームとは違うが最近新聞も文字が大きくなっている。
俗にいうユニバーサルデザインである。

という事で、フォームの文字は大きくすることをお勧めする。

技術的裏づけ
CSS（文字サイズの変更）


■フォームのステップ

「どこまで入力すれば、申し込みが完了するの？」
これまたよく言われる。

お申し込みの流れを表示するのはそういったユーザーを安心させるために必須である。
もちろん、運営管理／構築の時点で極力ステップを減らす努力は必要である。

技術的裏づけ
htmlベースのものであれば、こういうデザインが分かりやすいだろう

参照URL:
ステップメニューをCSSでデザインするサンプル （CSS Step Menu） - youmos

■ウェブならではの利点

便利なツールが出てきているのは確かである。僕が知る限りでの便利なツールを挙げてみた。

バリデートツール
楽にフォーム入力チェックを実装するJavaScript （JSValidate） - youmos
E-mailのフォーマットなどを動的に検証、
どこが間違っているかをユーザーに提示

郵便番号サジェストツール
AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）

解析関連
【ga.js版】Google Analyticsでリンククリック数を追跡する方法｜WEBマーケティング ブログ
Googleでイベントにスクリプトを埋め込めば、どこでどんなエラーが起こったかを解析できる。

RobotReplay - The Next Generation of Web Analytics
もっと視覚的にするとすれば、これ。ただ、少しシステムがやわい。
個人情報もまるだしだな。これは、外部のサービスすべてに言えますが・・・。

■忘れてはならないこと

フォームに関わらずそうですが、
お問い合わせが増えたから、売り上げがあがるわけではありません。
また、ウェブだけで全てを補おうとしても無理です。
ちなみに僕はお問い合わせフォームに電話番号があれば、
営業時間であれば必ず電話します。
（要はお問い合わせフォームはいくらタイピングが早くても、タブで操作ができても面倒なのです。）

また、いくらフォームが機能的であっても、それらへ誘導できるコンテンツがなければ意味がありません。
WEBでのフォームは便利でありますが、不便なのです。SSLもそうだし、フォーム情報を送信するのを嫌がる人はたくさんいます。クレジット情報は特に・・・。

こんな長々と書いていて、本末転倒なのですが、

「問い合わせフォームを入力するのがが簡単なんですわ」
といわれても、選ぶ理由にはなりにくい。

要はコンテンツなのです。
お問い合わせフォームがぼろぼろであろうが、コンテンツがおもしろかったらお問い合わせは来るものだし、注文がくるものです。

何かアホらしいのです。技術的なことや、
面倒くさいの一言で、人の気持ちが変わってしまうことが・・・。

WEBなんてそんなもんですわ・・・。（結局愚痴っぽくなってしまった。）

いろいろと感じる事がある。
デザインの現場にいた僕としては、
今標準である1024×768の中でデザインするのは、どうも納得がいかない。

そんなところで、背景に100％のボーダーを入れてみたり、いろいろとするわけだけど、
どうも限界が見える。
だからといって、1024×768以上のサイズをターゲットにするのは現実的ではない。

センター揃えのデザインが100％いいかといわれると、そうでもない場合がある。

日本ビルファンド投資法人
http://www.nbf-m.com/nbf/

プリントの事、モニタサイズのこと、UI、ブランドとしてのページデザイン
72dpiの限界、そんな障害があるからこそ
ウェブデザインはおもしろい。

現状、便利なDreamweaverに慣れているせいか、Webだったら、これでも、充分という点がありますが、使った感想としては結構便利です。細かいレイアウトなんかは、手打ちでやってましたし、標準のMTのタグはBIUと引用くらいしかなく、結構いろいろやりにくいのが現状でした。

だからこそ、結構使えると感じるのかもしれません。

ここからテストです。どうやら、shift+enterはbrとして聞くみたいです。

テーブルも入れてみましたが、このブログでは、table class="tbl1"ということでtdもまとめて制御できるクラスを一つ作っているので、これがまた、便利です。

テーブルのテスト

住所	大阪市中央区ああああああああ
TEL	06-0000- 123455
備考	テーブルを入れるときに、タブも利きます。 このあたりはDreamweaverと同じみたいですね。

 リストの制御も結構楽で、Dreamweaverのデザインビューと同じく、

選択範囲をリスト表示にすればいろいろとできます。

• リスト1
• リスト2
• リスト3

タグを打つよりは僕は早いみたいですね。

さらには、Undoも利きます。（コマンド　+ z）

そう考えれば、総評としては、便利なものには間違いないのですが、実際問題タグなんかが分かっていて クラスをある程度固めているサイトなんかに有効なんでしょうね。

下記ではフロートのクラスのテストをしています。
（編集画面でもしっかりフロートされています。） 

 

ここにテストのテキスト

フロートなんかも実際にかかっていて、結構便利かもしれないです。

画像も無理やりギュッとドラッグドロップで大きさを変更できます。

 

←こんなアイコンも入れられるみたいです。これが、コメントなんかにあったらおもしろいですけどね。

しかし新しいmt4では、編集画面が前に比べれば、強化したみたいですね。多分テーブルとかは入れられませんが…。それでも、やっぱり結構ツールには間違いありません。

htmlやcssを分かっている人は下記でデモがあるのでお試しください。 

 

TinyMCE for Movable Type:MovableTypeの更新を快適にするAjaxなWYSIWYGエディタ
http://www.dakiny.com/tinymce/