左が過去で右が未来…？ページ送りの正しい方向とは？WEB屋のみなさんに聞いてみました
ブログって、ページ送りがついてますよね。一覧にも、記事詳細にも。先日気付いたのですが、 記事一覧のページ送りは『右』にいくほど過去になって、詳細ページは『左』にいくほど過去になるサイトが多いのです。 これって何か変じゃない？という疑問をWEB屋の皆さんにぶつけてみましたので、いただいた回答をまとめます。 何が言いたいか よくあるページ送りはこんな感じなんです。 記事一覧のページ送り 記事詳細のページ送り 仮に最新の記事の詳細とします。『次』にあたる記事がない場合こんな感じになっています。 記事一覧は右に行くほど過去なのに、詳細に入ったときにページ送りの方向が変わるのが何か気持ち悪いなぁという事なのです。 （ちなみに、説明上『前の記事』『次の記事』というボタンを置いていますが、普段は記事タイトルを表示させています） 記事詳細のしっくり来るページ送り こっちの方が矛盾がないというか、しっくり来
IAシンキングとは -information architecture- ｜https://wp.yat-net.com/name
2013年 04月 19日 IAシンキングとは -information architecture- カテゴリ： IAシンキング タグ：IAサイト構築サイト設計 サイトの設計、情報の整理、SEO、UI。Webサイトの構築時に考えるべきことはたくさんありますね。世のWebデザイナーの方やディレクターの方、インハウスの方など、色々な 役割の人がそれぞれの観点から情報を整理したり、競合サイトを調査したりと様々な事をしています。 しかしそれらを行うにあたって明確なフローが決まっているか？と言う割りとそうではなく、多くの人が意識的レベルでそのフローを行なっているのではないでしょうか？ それらのフローを意識レベルで行えるということは非常に素晴らしく、欠かすことが出来ないスキルであることは間違いありません。 ですが、プロジェクトに参加するメンバーのスキルやレベルは必ずしも一致しているとは限らない為、ひと
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
UXの前にまずユーザビリティ - 猫飯は七里帰っても食え
2013-03-01 UXの前にまずユーザビリティ 1998年に「誰のためのデザイン」で有名なドナルド・ノーマンが、 「ユーザビリティではもはや説明できない！UXだ！」 みたいなこと（適当）を言ってから、早15年、日本でもいろんなところでUXUXと言われるようになりました。 1999年にはISO13407で「人間中心設計」が定義され、2010年にはそれがISO9241シリーズに統合され、UXについても定義されました。 2013年の今、出せば売れる時代は終わった。これからのものづくりにおいてはUXを考えることが重要だ、と世界中で言われています。 しかし、そもそもUXの原点となったはずである、ユーザビリティについてしっかりと理解している人はどれくらい居るのでしょうか？ ドナルド・ノーマンが、 「ユーザビリティではもはや説明できない！UXだ！」 みたいなこと（適当）を言ってから、もう15年です。
レスポンシブwebデザインの作り方とSEOとUXを考察
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
こんな企業サイトは売上に繋がらない
「ホームページが売上に繋がらない・・・」職業柄このような相談を受ける機会が多々あります。 売れる企業サイトと売れない企業サイト、その違いは何でしょうか？ 売れない企業サイトの特徴 サイト名が企業名のみ 奇をてらったデザイン 新着情報が更新されていない 商品の効果が記載されていない 「スピード対応」など言葉が抽象的 「お客様の声」に良い事しか掲載していない サイト訪問者にとってもらいたい行動が不明確 どうでもよい徒然日記的な社長ブログ Twitterの無意味なつぶやきが表示されている サイドバーにバナーが多い 「用語集」「リンク集」など無意味なページがある ヘッダ画像がスライドしたりフェードして切り替わる 画像が多く重い（ページを開くのに時間がかかる） 1.サイト名が企業名のみ Googleなどの検索エンジンは、サイト名に含まれるキーワードを一つの参考として、検索結果を表示します。 例えば、
Who Needs Web Accessibility? How to Make Accessible Websites?
2013年3月25日 アクセシビリティ 昨年少しの間ですが入院しました。その間は大人しくしていればいいものを、脊髄麻酔や鎮痛剤が効いて苦痛のない時は退屈なもんで、Webサイト閲覧・メールチェックなどはしていました（私の行きつけの病院はインターネット利用可）。しかし体が思うように動かないので、今までどおりWebサイトを閲覧するのは困難。その時初めてアクセシビリティの大切さを身を持って感じ、それから少しずつお勉強している次第です。今回はWebサイト閲覧におけるアクセシビリティについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ Webアクセシビリティとは 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシ
これは快適！Mac OS X上でWinのIE6/7/8/9/10など、さまざまなブラウザの確認ができるアプリ -Sauce
Macでウェブ制作に携わる人全員に伝えたい、Windows, Linux, Mac OS Xのさまざまなブラウザでの表示確認ができる無料のMac OS Xアプリを紹介します。 Boot CampやParallelsなどは必要なく動作します。 Sauce -App Store Sauce for Mac -Website Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。
人間の視野とディスプレイの関係 | 56docブログ
人間の視野とディスプレイの関係 【Design】 wrote on 2012/12/19 http://blog.56doc.net/Entry/484/人間の視野とディスプレイの関係 一年ちょっと前に 人間の視野角と矩形・解像度について考えてみた こんなことを書きまして面白いテーマだと思いつつ放置してました。 最近改めて調べるともうちょっと人間の視野についてわかったのでその辺のまとめなどを。 スポンサードリンク 有効視野の中でも特に視力の優れる範囲は限られている 過去記事では主に「有効視野」と言うものについて調べ、矩形アスペクト比や解像度との関係について考えてみました。この中で「安定注視野」などという言葉も出てきて当時はその定義も良くわからないままだったのですがGoogleブックス検索で 眼・色・光 - 本書編集委員会 - Google ブックス こんな書籍を発見。で、このなかの9
Webデザイナーが憧れる余白が美しいWebデザイン2012年版
Ambidex 25th Anniversary... / 株式会社 細尾 / mount inc.他...全55件
B to CのWebサイトにおけるユーザーの目的達成までの流れと画面の操作性について
B to CのWebサイトにおいて、ユーザーの目的達成までの流れと、それに影響を与える画面の操作性についてまとめてみました。 マーケティングの基礎の部分、あまりわかってなかったわーというデザイナーさん向けです。 B to CのWebサイトにおいて、ユーザーが、ある商品・サービスを知ってから行動をしてそれを得るまでの流れをまとめてみました。 参考：図解 実戦マーケティング戦略 認知 認知は、以下媒体において商品やサービスなどの存在を初めて知ったという状態のことです。また、ここからWebサイトの有無を知ります。 チラシ、ポスター、雑誌 デジタルサイネージなどの街頭広告 検索キーワード Webサイトのバナー広告 TwitterやFacebookなどのSNS 興味 興味は、その商品やサービスの内容、それに関わる写真・グラフィック、デザインなどに惹かれ、もっと知りたいと思った状態のことです。 サイト
ユーザ心理を捉えてコンバージョンボタンの文言を (ユーザビリティ実践メモ)
ウェブサイトでユーザに情報提供することも大切ですが、商材によってはユーザと店舗などで対面し、直接的にコミュニケーションする機会を持った方が自社の商品をより魅力的に伝えられる場合があります。 特に銀行や保険業界などでは、ウェブサイトを用いて自社の商品を検討しているユーザを実際の店舗での相談会・説明会に誘導したい、と考えている方は多いのではないでしょうか。 ただし、「店舗での相談会・説明会に来てもらう」ためには、ユーザにとって心理的に高いハードルを越えてもらう必要があります。そのため、「思うように来訪者数を伸ばせず、困っている」というご相談を多く頂きます。 今回は、弊社で行った生命保険のウェブサイトにおける行動観察調査を事例に、「ユーザに クリックしてもらいやすいコンバージョンボタンのあり方」をご紹介します。 あるユーザは、生命保険のウェブサイトを「そろそろ本格的に乗換えを検討しようかな」 と
有名Webサイトで乱立する「レインボーカラー」の正体。または「多様性」を表現するデザインモチーフについて | ミヤショウBLOG
レインボーカラー増えてるよね？ 先に言っておくと、この記事は「レイボーカラー」「レインボーカラーを採用しているWebサイト」をdisっているのではない。むしろ好きだし、いま自分が制作しているWebサイトでも採用しているくらいだ。 ただ最近、「レインボカラー」のを用いたデザインのWebサイトがすごく増えているような気がする。まずは下記を見て欲しい。 ※この記事での「レインボーカラー」は「赤・橙・黄・緑・青・藍・紫からなる7色」という意味ではなく、バラバラの色が4,5色以上並んでいる「レインボーっぽいカラフルな色の組み合わせ」という意味でとって頂けたら嬉しい。 ▼ nanapiのヘッダー ▼ vimeoのヘッダー ▼ vimeoのフッター ▼ vimeoのモーダルで動画を表示した際の見出し ▼ NHN Japanディレクターブログ（旧ライブドアブログ）の本文中の見出し ▼ pixiv
そのデザイン処理、こんな風に工夫すればもっと良い物になりますよ / Maka-Veli .com
お前偉そうだなシリーズ第一弾 まぁ全部、全体のデザイン次第ですし、流行りモノ感もありますが。 ちょっとだけ変えると、グッとクオリティ上がりますよー的な小ネタです。そしてかなり個人的趣味です。 シャドウ ドロップシャドウなんかは手軽にクオリティ上げられていいですよね。 ただシャドウはつけすぎる(濃すぎる)と主張が強くて重くなりがち。 シャドウ自体はただの効果・装飾ですから、本体を引き締める程度にかけておけば良いと思います。 また、単なる上下・左右のシャドウではなく、球体・曲線でシャドウを上手く入れていくと面白いですよ。柔らかみもありますし。 グラデーション 立体感を出してチープな印象を防げるグラデ。 ただ、最近はベタ塗りでビビットに見せる装飾が流行ってきましたね。 思い切ってベタに変えるのも手。 もしくは、かなり差を狭くして「これグラデ？」と思わせるくらいのモノが良いかも
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
cmmntr.com
とっさのデザイン〜ボタン編〜
http://handywebdesign.net/2012/11/if-you-want-to-use-many-colors/
