KAYAC CUPPY サイトリニューアル解説
実録！サイトリニューアル 2007年07月07日。 はからずも見事に『7』並びとなった今年の「777プロジェクト」。この日に面白法人カヤック、そしてグループ会社クーピーのWEBサイトがリニューアルしました。創業からこの8月で10年目に突入するカヤックは2年半ぶり5回目、クーピーは2001年の創業以来初の試みです。 このサイトができあがるまでにどんなストーリーがあったのか？新生カヤック＆クーピーサイトの全容は？両サイトの総指揮をとった、カヤック＆クーピー代表・柳澤がご報告します。 まずは、でっかい文字のサイトにしよう サイトリニューアルに関して大切なこと、それは『賛否両論はあるだろうけど「いいんだ」という“思い込み”で進むこと』ですね。今回僕が両サイトを通して、果たしていいのだろうか・・・と迷いながらも、思い込むように意識したことは「でっかい文字のサイトにしよう」でした。 ネッ
KeynoteでUIデザイン その２ | ZEROFACES
前回「Keynote」でUIデザインをしている話を書きましたが、今回は具体的な例として普段の作業風景をMovieにまとめてみました。 (1)「Keynote」で画面パターンのラフデザインをします。 ※「Keynote」の描画力に注目！ (2)各ページにリンクをはって画面遷移を確認。共有したい場合はpdfに書き出して完了。 pdfに普通に書き出した場合、どの部分にリンクがはられているかが分かりにくいという難点があります。その場合は、Adobe Acrobat上でリンクを作成した方がいかにも「ボタン風」の見た目になって分かりやすいと思います。（詳しくは３番目のムービーで） また別の活用法として、グラフィックデザインを作り込む前段階のペーパプロトの状態で、その紙を写真におさめてpdfに読み込み、その上にリンクを貼るだけでも動線の確認ができます。これは作業の上流行程で手軽に使えるので、かなり有効
第7回 Directing Contents「コンテンツディレクション」 | gihyo.jp
ユーザーニーズとコンテンツネーミング これまでのウェブサイトの構築プロセスは製品やサービスの情報を求めるユーザーに対するソリューション提供を行う事を目的として紹介してきた。これらのニーズを持ったターゲットユーザーを検索やトップページなどから的確に導くために必要となるのがニーズに応えるコンテンツのプランニングとネーミングである。 通常、コンテンツ制作はコピーライティングの技術や、扱う製品、サービスの専門知識が必要となるため、ウェブ制作業務としては敬遠されがちだが、細かいコンテンツ内容のディレクションはウェブサイトの成功には大変重要な要素である。 "コンテンツタイトルがユーザーニーズに応えるキーワードを含まなければ、すべてのユーザーをコンテンツへ導くことは難しい。" "コンテンツタイトルが製品、サービスが持つ独自性を伝えていなければ、ユーザーへのアピールができない。" ウェブ制作においてディレ
第6回 Sitemaps and Navigations「サイトマップとナビゲーション」 | gihyo.jp
ユーザーナビゲーションフローを書き出し終えたら、ウェブサイトに必要なコンテンツが全てリストアップできるはずだ。ユーザーのニーズを満たすためには複数のエントランスとエグジットを持つサイトとなるため、コンテンツ間の遷移がとても重要となる。 また、最短でユーザーをエントランスからエグジットへ誘導するためにはコンテンツを種類にごとにツリー構造で分けるのではなく、ユーザーの遷移につながるモティベーションによってコンテンツをフローによって分類するべきである。 今回も前回に引き続き新製品のプロモーションサイトを例題に解説を行う。ユーザーナビゲーションフローを見ると、ほとんどのコンテンツは方法さえ提供すれば、ユーザーが直接アクセスする可能性の多いものであることがわかる。トップページからユーザーをエグジットへ誘導する事も重要ではあるが、同じように、各ページからの誘導も大変重要である。全ページの相対関係が全て
第5回 User Navigation Flow「ユーザーナビゲーションフロー 」 | gihyo.jp
ウェブサイトの成功はいかにユーザーを誘導できるかにかかっている。様々な集客方法からユーザーが求めるコンテンツ、コンバージョンへと誘導することが確実な成果へと繋がる。プロモーション、ブランディング、コーポレート、どのようなサイトを作る際も、ユーザーがどのような理由（目的）でサイトを訪れ、コンテンツを閲覧し、目的のアクションを起こすのかを理解する必要がある。しっかりとした導線を引くためにはユーザーのナビゲーションフローを作成し、正しいサイトの設計を検証する必要がある。 効率的なナビゲーションフロー設計メソッド より効率的に構築を行い、サイトで必要なナビゲーションフローを見失わないためにも、今回はメソッドに沿ったかたちでの設計方法を紹介する。このメソッドに合わせて設計を行うことでこれまで紹介してきたサイトのプロセスを踏まえた正しいサイトの設計が可能なのだ。 1：エントランス（訪問方法）のリストア
【レポート】ハイクオリティサイトのワイヤーフレーム分析 (2) ワイヤーフレーム分析 : みずほ証券 | クリエイティブ | マイコミジャーナル
みずほ証券 ・幅:約750ピクセル / 高さ:約1,050ピクセル ・XGA(1,024×768ピクセル)で約1.5スクロール (出典:みずほ証券) ワイヤーフレームの分析結果 SVGA(800×600ピクセル)でも横スクロールバーが出ない設計 すべてのコンテンツ幅を約750ピクセルで設計しているため、SVGA(800×600ピクセル)でも横スクロールバーが出ないのが特徴だ。SVGAを想定したワイヤーフレーム設計では、このようにコンテンツの最大幅を760ピクセル前後に抑えるのが一般的である。 高さも約1,050ピクセルと、非常にコンパクトにまとまっている。このサイトにとってトップページに必要なコンテンツが過不足なく収められている印象だ。また、情報ブロックそれぞれを適度な余白によって明確にわけているため、すっきりと見やすく、ユーザーが自分の目的とする情報を探し出しやすい設計の好例といえる
設計者とデザイナーとコーダーと高品質なサイト | Takazudo Clipping*
最近、会社の中で、サイト制作の際、デザイン・HTMLに行くまでにどういう資料を作ればいいんだろうプロジェクトみたいのをやっておりまして、はじめは、ページの構成、こー言う風に考えていますという、ページの内容を説明する資料のフォーマットを考えていたんですが、どうにもそこだけでは足りないような感じに思えてきて、どうしたもんかなーと思って色々見ていたところ、インフォメーションアーキテクチャってのが、まさにその答えでした。今まで制作の中で悶々としていたことが、かなーりすっきり理解できた。誰がいつ何をしないといけないのかが。 なんとなくうだうだ情報設計みたいな話 インフォメーションアーキテクチャについての細かい説明は、勉強中なのでこのエントリ内では詳しく書きませんが、サイト制作には、大まかに、次のようなフローがある。一応ここでは、サーバーサイド技術を含まない、コーポレートサイトみたいなものだと仮定して
新ポータルサイトに見るWebページ・デザインのトレンド
この春，主要な国内ポータルサイトが相次いでトップページをリニューアルした。情報ポータル分野では2008年3月31日にgoo，4月7日にlivedoor，4月14日にMSN Japanと新トップページの公開が続いた。検索大手のGoogleも3月19日にトップページをリニューアルしている。2008年1月のYahoo!ジャパンのリニューアル（関連記事：メディアとしての価値を向上させる -- 1月1日正式公開のYahoo! Japan新トップページ）が先陣を切ってから数カ月で，主要ポータルの顔が一新された格好だ。 ポータルサイトは何万人というユーザーが日々訪れる場所。それだけに，ここには幅広いユーザー層に受け入れられているデザインのポイントがあるはず。各ポータルサイトのデザイン的な共通点や，訴求ポイントの違いを分析して「ページ・デザインのトレンド」を探った。 検索機能が目立つように まずはページの
[体験レポート]やってみましたペルソナ作り――これがウェブサイト向けペルソナの作り方だ | Web担当者Forum
Web担編集部では、今回、Web担当者Forumのサイト向けに実際にペルソナを作成してみたので、その様子をレポート形式でお届けする（ペルソナについて詳しくは「ウェブサイト向けペルソナを理解して、思いこみのユーザー像と決別しよう」を参照）。 結論からいうと、ペルソナ作りはWeb担当者にとって非常に役立つものであり、編集部のスタッフは、今回のペルソナ作りによって新しい発見と良い刺激を得ることができた。また、ペルソナ作成はしっかりとした方法論のもとに行う必要があり、経験のある人の助けを借りることは必須だということもわかった。 使えないペルソナで失敗した経験実はWeb担編集部では、最初にメディアの中心としてのウェブサイトWeb担当者Forumをスタートした2006年7月の時点で、一度ペルソナを作成していた。「台東区にある玩具などのメーカーに勤める三島啓介さん（32才）」というペルソナだ。しかし、そ
![[体験レポート]やってみましたペルソナ作り――これがウェブサイト向けペルソナの作り方だ | Web担当者Forum](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ab74e15948c807ebbb39ce141223cec7464b905/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2008%2Fpersona_design%2Fpersona_icon.jpg%3Fitok%3DiOf_wBp2){kind=icon}
第2回 なぜ、楽天の商品ページはものすごく縦に長いのか？ | gihyo.jp
みなさんはオンラインショッピングモールの「楽天市場」に出店しているの店舗の商品ページをご覧になったことがありますか？ その中で「何で、楽天のお店の商品ページは、こんなに縦長いんだ？」と思われたことはありますか？ おそらく、楽天市場を利用したことのある方のほとんどは、「ものすごく縦長い商品ページ」を見たことがあるのではないかと思います。 ではなぜ、このように縦長いページが多いのでしょうか。そこにはネットショップで売上を上げるためのポイントが多く含まれていたのです。 ショッピングモールの商品ページが「ものすごく縦長い」理由 前回の記事「ネットショップに訪れるお客様の意識」にて、楽天市場やYahoo!ショッピングなどのオンラインショッピングモールを利用するお客様は「お買い物がしたい」という気持ちが強い、と解説しました。 モールに出店している店舗は、このお客様の高い購入意欲をより一層高め、商品を
第1回 "IAって何するの？" がわかる「IA One Sheeter」 | gihyo.jp
「IA」という言葉が、Web業界の中で皆さんに認知されるまでにはまだまだ時間がかかりそうです。ここで言うIAとは「情報アーキテクチャ」のことを指します。 Webサイトを構築する上で、欠かせないのがこの情報アーキテクチャだと言われてます。簡単に言うと、Webサイト全体の設計図であり方針です。その設計図や方針を具現化するためには、やはり伝えるための手段が必要になります。 この連載では、伝えるための手段としてのツール紹介や、伝えるために必要なヒントを中心に、Webサイト構築に関わる方々に有益な情報をお届けします。 IAについて 「IA」そのものについての説明は割愛しますが、ひと口に「IA」と言っても以下の2つの意味があります。 Information Architecture：情報アーキテクチャ（分野） Information Architect：インフォメーションアーキテクト（スキル） とくに
第3回 「買い物かごに入れる」ボタン、上につけるか？下につけるか？ | gihyo.jp
お客様がネットショップに訪れる目的は「お買い物」であり、お客様一人ひとりが欲しい物を探しにやってきて、欲しい物がいい値段で販売されていたら購入します。 つまり、店舗側のネットショップにおけるゴールは「購入手続きを完了させること」であり、もっと近いゴールは「お買い物かごボタンをクリックしてもらうこと」となります。 今回は、その「買い物かごに入れるボタンをクリックしてもらう」という点に注目し、最適な「買い物かごに入れる」ボタンの設置位置について考えてみます。 商品の購買率を変える「お買い物かごに入れる」ボタンの設置位置 「買い物かごを入れる」ボタンを設置する位置は、大きく分けて2つのパターンが考えられます。 一つは、ページを開いた瞬間にボタンが見える位置に設置する「上につける」パターン。もう一つは、商品のキャッチコピーやキャッチイメージ、商品の詳細説明を行った後に設置する「下につける」パターン
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
入力フォームのユーザビリティ&アクセシビリティ！
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
基準はどうでもいい。カテゴリ分けがされていることが重要、という話。
「選択の不自由」なんて言葉がありまして、選択肢が多すぎると逆に人は困ってしまうそうです（ファミレスでなかなかメニューが決められない、って方も多いですよね）。しかし「○万点のアイテムを揃えた最大級のオンラインショップ！」「○百種類のフレーバーが選べるアイスクリーム屋！」などというキャッチフレーズを目にするのが珍しくないように、選択肢の多さは客引き上有利になるもの。そこで選択肢を増やしつつ、選択の心理的負荷を減らす工夫が必要になるわけですが、「カテゴリ分け」が有効な手段の1つとして証明されたとのこと： ■ Categories Help Us Make Happier Choices (ScienceDaily) カテゴリ分け自体は別に奇想天外なアイデアではなく、近所のスーパー等でも普通に行われている話ですが。スタンフォード大学とコロンビア大学の研究者らによると、カテゴリ分けがされている場合/
第12回 ユーザーを「目利き」に生まれ変わらせ、購買を誘発させる写真の見せ方とは？ | ユーザー視点のウェブデザインガイド
第12回 ユーザーを「目利き」に生まれ変わらせ、 購買を誘発させる写真の見せ方とは？ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 写真のスペース配置の大原則は「場所をケチらない」ウェブサイト、特にECサイトにおいて「写真情報」は、商品の魅力を端的にユーザーに伝えるキラーコンテンツである。それだけに、見せ方1つで大きな効果を得られることもあれば、見せ方を少し誤っただけで多くのユーザーを取り逃がす、という怖さも存在する。そこで今回は、実際にユーザビリティテ
FAQの隠れた役割 (ユーザビリティ実践メモ)
ユーザから頻繁に問い合わせを受ける質問に対応するため、多くのサイトでは、「Q&A」や「よくあるご質問」といったFAQ（Frequently Asked Questions）コンテンツを用意しています。 今回はFAQを効果的に活用する見せ方について考えていきます。 FAQはユーザが持つ疑問の解決につながりますが、ユーザはサイトを利用するなかで、FAQをそれほど意識して探しにはいかないことに注意が必要です。 では、FAQはページのどこに配置するのがよいでしょうか。 ヘッダーエリアか、左右のナビゲーションにFAQのリンクが配置されているパターンを思い浮かべる方が多いでしょう。（図１） ユーザは、コンテンツエリアを中心に見ていくため、意識的に探さないとFAQがあることに気付きません。 サイトの共通要素として、問い合わせなどと同様、どのページにも同じ位置に配置すべきですが、それに加えて、コンテンツを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.typocode.net/2008/04/post_29.html
japan.internet.com Webビジネス - 最強の商品ページの作り方 〜競合ページに勝つ方法!?〜
ウェブの画面設計に使えるまとめ - DesignWalker
