料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも！
2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ
サイトやページのアバウトネス (aboutness) | Accessible & Usable
公開日 : 2014年7月29日 カテゴリー : ユーザビリティ / 情報設計 (IA) Web サイトや Web ページをデザインするにあたっては、そのアバウトネス (aboutness) を明確にすることがとても大切です。 アバウトネスとは、そのサイトやページが「何であるか？ (どんな情報を提供しているのか？)」ということです。もともとは、図書館情報学 (LIS : library and information science) や言語学で使われる用語だったようです (参考 : Aboutness - Wikipedia)。 Jacob Nielsen 氏は「How Long Do Users Stay on Web Pages?」という記事 (2011年9月) で、「ユーザーの多くは10秒から20秒ほどで Web ページから離脱するが、ユーザーにとって価値ある情報が提供されていれば
WCAN 2014 Summerで「ディレクターとして意識スべき、『誰がどうみてもそうとしか受け取れない文書』術」のセミナーをさせていただきました。｜Webディレクションやってます blog
WCANには、2007年に初めて登壇をせていただいて、今回で4回目、それ以外にWCANのショートセミナー的なものが2回させて頂いているので、1.5年ぐらいに一回お話をさせて頂いている感じです。 過去のWCAN関連でのセミナー 2007年:WCAN 2007 spring「Webブランディングを成功に導く思考/アイデアの出し方」 2008年:WCAN 2008 SPRING「Web制作でのプロジェクトマネージメント」 2008年:WCAN Directors Workshop 2009年:WCAN2009 Autumn「Webディレクターとしての経験密度とWebブランディング」 2011年:ベースキャンプ名古屋「Webディレクターとしてのアイデア思考法」 今回のお題のセミナー内容って? 今回は「文書術」ってことで、気がついた方もいるかもしれませんが、内容としては昨年の「神戸ITフェスティバル
ユーザーエクスペリエンス実践における、アクセス解析の3用途
アクセス解析データを最大限に活用するために、UXの専門家は、リソースを奪うのではなく質的なプロセスの価値を高めるよう、こうしたデータの統合をする必要がある。 Three Uses for Analytics in User-Experience Practice by Jennifer Cardello on November 17, 2013 日本語版2014年1月29日公開 従来、アクセス解析はマーケティングの戦略や戦術を伝えるのに利用されてきた。しかし、現在では、調査やデザインの支援として、こうした定量的なソースに頼るユーザビリティやユーザーエクスペリエンスの専門家が増えているように思う。 アクセス解析の最大の課題は、人の気を惑わすブラックホール、つまり、アクションを起こせる知見が何もない「興味深い」データにすぐなり得ることだ。 おそらく、やると最悪なのは、誰かにアクセス解析システム
IAシンキングとは -information architecture- ｜https://wp.yat-net.com/name
2013年 04月 19日 IAシンキングとは -information architecture- カテゴリ： IAシンキング タグ：IAサイト構築サイト設計 サイトの設計、情報の整理、SEO、UI。Webサイトの構築時に考えるべきことはたくさんありますね。世のWebデザイナーの方やディレクターの方、インハウスの方など、色々な 役割の人がそれぞれの観点から情報を整理したり、競合サイトを調査したりと様々な事をしています。 しかしそれらを行うにあたって明確なフローが決まっているか？と言う割りとそうではなく、多くの人が意識的レベルでそのフローを行なっているのではないでしょうか？ それらのフローを意識レベルで行えるということは非常に素晴らしく、欠かすことが出来ないスキルであることは間違いありません。 ですが、プロジェクトに参加するメンバーのスキルやレベルは必ずしも一致しているとは限らない為、ひと
サイトマップのページは必須か？ | Accessible & Usable
公開日 : 2013年3月2日 (2016年10月22日 更新) カテゴリー : ユーザビリティ サイトマップとは、Web サイトを構成する各セクション/各ページへのリンクを一覧表示したページです。数多くのサイトが備えていますが、以下に図示するように、各コンテンツの位置関係 (階層構造) が整然と並んでいるのが一般的です。 サイトマップの例 (アップルの Web サイト) ユーザビリティのガイドラインとして、このようなサイトマップのページを設けることは必須である、という話を聞いたことがある人も多いと思いますが、ここ最近、私自身の中で「果たしてサイトマップは本当に必須なのか？」「サイトマップがないとユーザビリティが本当に阻害されるのか？」と自問自答する機会が度々あったので、考えをまとめてみようと思います。 サイトマップの必要性 サイトマップの効用としては、以下のようなことが、よく言われていま
Webの仕事をするなら最低限知っておくべき戦略フレームワーク×10 | sogitani.baigie.blog
経営やマーケティング、ブランディングなど、ビジネスを語る際に必要な論理的思考。その思考パターンを定型化し、誰でも使えるようにしたのが戦略フレームワークです。戦略フレームワークはビジネスのあらゆる分野で使われており、有名・無名を含めると、膨大な数が存在します。 戦略フレームワークを使うと、現状を論理的に構造化し、客観的に俯瞰できるようになります。また、いつもフレームワーク発想で考えるクセを付けていると、ヒアリングしたその場で企業が抱える問題点が見えてきたり、自分の主張や提案を、分かりやすく説得力をともなって伝えることができるようにもなります。 Web業界はテクノロジーの影響が非常に強い業界です。特に制作や開発に深く関わる業種・職種ほど、ビジネスの本質ではなく、技術的なトレンドに流された発想に陥りがちです。 しかし、戦略フレームワークの考えをマスターしていれば、技術トレンドに流されず、ビジネス
ダメディレクターからの卒業、Webサイト企画＆制作時に必ずおさえておきたい「5W2H」
ダメディレクターからの卒業、Webサイト企画＆制作時に必ずおさえておきたい「5W2H」 2013.02.26 | この方法お勧めです！ | 考える。 | 覚えておきたい 密かに近所のスーパーで、高齢者と数少ない吹雪まんじゅうの争奪戦を繰り広げています。 もうちょっと仕入れてくれればいいのにな〜。 こんにちは。和菓子大好きグリーンです。 代理店の営業さんやディレクターやと打ち合わせしてて 「制作中に内容がコロコロ変わる」 「話を聞く度に違う事言ってる」 なんて経験ありませんか？ 「俺が侍だったらこの場でお前を切り捨ててるぜ」なんて妄想で乗り切るのもしんどいような時ないですか？ サイトの方向性やコンセプトがあいまいなまま進めるとこうなっちゃうんですよね。 Webサイトの企画・制作時におさえておくととっても便利な「5W2H」という考え方をご紹介します。 「5W2H」とはアルファベットの頭文字をと
レスポンシブwebデザインの作り方とSEOとUXを考察
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
「ユーザーがお金を払い続ける理由は、コンテンツではない。その先にあるユーザー体験だ」スクーが描く、WEB上に誕生した新しい学びの場
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
モバイルファーストかどうかって言うんじゃなくてPC Web終焉の始まり
ちょうど去年の年末から「PC Web終焉の始まり」ってタイトルのネタで書こうと思っていたら、タイミングよくこんなエントリーが（笑） モバイルファーストは間違いだったのか « うめのんブログ. これに呼応して@fshin2000さんも F’s Garage @fshin2000 ：モバイルファーストが失敗なハズはないが、今はまだ時期尚早. 僕はどちらかというと、今年がまさに転換期でPCでのサービスをやるとしてもプロトタイプとして位置づけ、スマホを中心とするモバイルデバイスでユーザー体験が解決するようにサービス開発をすべき、もう一つのポイントとしてandroid版から開発すべきと考えています。 僕らみたいにネットのサービスに日々触れていて、昼間PCに向かっている時でもインターネットを使っている人っていうのは、実はごくごく一部であって、業界ではない人と会話するとやはり皆スマホから色んなサービスを
Who Needs Web Accessibility? How to Make Accessible Websites?
2013年3月25日 アクセシビリティ 昨年少しの間ですが入院しました。その間は大人しくしていればいいものを、脊髄麻酔や鎮痛剤が効いて苦痛のない時は退屈なもんで、Webサイト閲覧・メールチェックなどはしていました（私の行きつけの病院はインターネット利用可）。しかし体が思うように動かないので、今までどおりWebサイトを閲覧するのは困難。その時初めてアクセシビリティの大切さを身を持って感じ、それから少しずつお勉強している次第です。今回はWebサイト閲覧におけるアクセシビリティについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ Webアクセシビリティとは 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシ
Webデザイナーが憧れる余白が美しいWebデザイン2012年版
Ambidex 25th Anniversary... / 株式会社 細尾 / mount inc.他...全55件
5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える
2012年 08月 24日 5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える カテゴリ： IAシンキング Webデザイン タグ：IAシンキングWebサイト構築 サイトストラクチャとはWebサイトの構造のことです。サイトストラクチャを考える際には、作るサイトの目的に合わせた設計が必要なのは言うまでもありません。では、その目的に合わせた設計とはどういうものでしょうか？それを考えていきたいと思います。 1.サイトストラクチャ（サイトの構造）パターンについて 2.5つのパターンの解説 3.サイトの全体像と部分的な構造 サイトストラクチャ（サイトの構造）パターンについて Webサイト制作にあたり、サイトの設計で多く採用されるものとして5つパターンがあります。 階層型分類構造 ファセット型構造 Web型構造 直線型構造 ハブ＆スポーク型構造 名称だけを見てもピンと来
WEBディレクターなら知っておきたい。プロジェクトを上手に進めるために必要な知識。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WEBディレクターの定義は曖昧です。プロジェクトの舵取り役として、コンセプトから仕様検討、デザイン、設計、プロジェクトマネジメント、マーケティングなど広範囲な業務に携わります。広範囲な業務だからこそ曖昧になりそうな職種ですが、デザイナー、エンジニア、マーケター等、チームから信頼されるために必要な知識をまとめてみました。 WEBサービスの知識 WEBの世界は日進月歩で変化していきます。RSSやソーシャルフィルターなど、自分なりに最新の情報をキャッチできる環境を整える事が大事です。クライアントからの信頼を得るためにも、最新のWEB事情やイケてるデザインをパパっと提案の中に組み込めるといいと思います。情報は大きな武器になるので、アンテナは常に立てておくことをオススメします。 Webディレクターならチェックしたい、ニュースサイト15選 大まかな設計の知識、インフラの知識 データベースの構成やサーバ
ユーザーを「人間」扱いしていますか？ | Accessible & Usable
公開日 : 2012年7月22日 カテゴリー : ユーザビリティ すぐれたユーザーエクスペリエンス (UX) を提供するためは、ユーザーを「人間」として尊重することが欠かせません。 ほとんどの方が、そんなこと「当たり前」だとお思いでしょうが、実際は、きちんと「人間」扱いできていないことが多いのではないでしょうか。皆さん自身がひとりのユーザーとして Web サイトを利用したときのことを思い返してみると、失礼な扱いを受けたと憤慨した経験は、少なからずあると思います。 Web は上手に活用することで、運営者 (企業) とユーザー (顧客) が直接コミュニケーションできるメディアですが、運営者側から見た場合、アクセスして利用してくれるユーザーの実際の様子が見えるわけではありません (アクセス解析でユーザー行動のデータを得ることはできますが、リアルタイムなビデオチャットでもない限り、利用中のユーザー
パララックス効果で魅せる縦に長いウェブページ | Accessible & Usable
公開日 : 2012年11月26日 (2015年12月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 最近、パララックス効果 (parallax scrolling effect) を採り入れた、縦に長いウェブページが注目を集めています。以下の例のように、ページをスクロールしてゆくと、それに呼応して複数の視覚要素が個別に動くことで視差を作り出し、奥行き感や動きを演出する、というものです。 実際の動きを動画キャプチャしてみました。クローズドキャプション (字幕) で補足説明 (動きの解説) も用意してあります。 Anna Safroncik (http://annasafroncik.it) この効果をうまく用いれば、ユーザーの関心を惹きつける (エモーションを刺激する) ことができ、一定時間、ページに滞留してもらえることが期待できます。面白い視覚効果であれば、行きつ戻
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
Photoshop VIP ☞ iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP