IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css
*{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing
トップページは検索窓だけ--大胆なデザインに変更した神戸市の狙いとは
この2月から神戸市の公式トップページが、風景写真に検索窓を配置しただけという斬新なデザインにリニューアルし、話題となっている。リニューアルの経緯について、プロジェクトを手がけたペタビットのミキ チョクシ氏がCode for Kobeの定例会で説明した。 通常、自治体のトップページデザインは、市民への情報を発信する窓口として新着情報などのメニューがぎっしり並べられている場合が多い。だが、それで目当ての情報にたどり着けるのかといえば必ずしもそうとはいえず、神戸市のトップページも分析したところ、トップページの直帰率は50％以上と2人に1人は次のページに進まずに離れてしまうことがわかった。 ミキ氏らはさらに自治体サイトのトレンドを専門家の協力を得ながら分析し、そこから理想のあるべき自治体サイトとして、市民が困っていることを察知して用意するコンシェルジュとしての役割を果たせるようなページのあり方を提
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光～ヒートマップでUI改善
社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系「カンブリア宮殿」。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 （放送バックナンバー：爆走する国民的サイト！これがネットの底力だ！－ テレビ東京） 公式ブログ新コーナー「news HACK」ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例（※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください）。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
単なる流行りじゃない？！水戸黄門型レイアウトが定番化した理由を考えてみた
定番っていいですよね。わずかな退屈さはありつつも、安心できます。 スニーカーならオールスター、スマホならiPhone、ビールならスーパードライみたいな。 Webサイトにも2012年ごろから急増し、現在では定番化したレイアウトパターンがあります。 ちなみにこのパターン▼ その代表例、Evernoteのサイト▼ http://evernote.com/intl/jp/ このパターンで商材となっているものの多くが、物理的なプロダクツではなくクラウドなど新しめのウェブサービスで、皆さんも頻繁に遭遇するのではないでしょうか。 グリッドレイアウトの亜種ともいうべきこれに正式名称があるのかわからないのですが、とりあえず僕は心の中で水戸黄門型と呼んでいます。時代劇の定番だし。 ※あくまでイメージです 定番化して今もなお増え続けている理由をちょっと考えてみました。 多分この辺じゃないかなーと A. 整然とし
「デザインに凝ったウェブサイトほど予約率は低かった」 - ネタフル
「デザインに凝ったウェブサイトほど予約率は低かった」，星野リゾート社長が講演という記事より。 「我々はついつい旅館やホテルのウェブサイトを格好良くしよう、きれいにしようと思ってしまうが、それが必ずしも予約率向上にはつながっていなかった」 星野リゾート社長が「収益向上を狙うネット・マーケティング戦略 『科学的仕組み作り』で顧客数を拡大」という講演で語ったそうです。 曰く、 よく調べると、施設によってウェブサイトのアクセス数や、予約に至る率にかなりばらつきがあることが分かってきた。ここも科学的にやらなければならないと思った。 科学的というのは、きちんとアクセス解析するなどして検証しましょう、ということのようですね。ベーシックですけど、欠かせません。 さらにビービットの協力を得て、アイトラッキングに出会ったそうです。 「利用者は、『ゆったりリラックス』などの文字情報はあまり見ておらず、画像を目で
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
すき家 アルバイト募集情報
すき家を経営している株式会社ゼンショーでは、アルバイト採用を行っています。 情報をご覧のうえ、ふるってご応募ください。社員一同、いい人との出会いを楽しみにいたしております。
[JS]ページデザインのもっとも大切なポイントを確認できるブックマークレット -MIN
レイアウトのバランスやグリッドの構造など、ページデザインのもっとも大切な基本となるポイントを確認できるブックマークレットを紹介します。 MIN · Examine the foundations of any site design. [ad#ad-2] MINはページからあらゆる飾りを取り除くブックマークレットで、上記ページでMINを使用すると、下記のように飾りがすべて取り除かれた状態で表示されます。 MINを使用すると、装飾がすべてなくなります MINで確認するポイント 飾りを取り除くことで、ページデザインの大切な基本となるポイントを確認できます。 レイアウトのバランス グリッドの構造 タイポグラフィの階層 タイポグラフィによるブランドプレゼンス MINの使用方法 MINは、ブックマークレットとして利用します。 ブックマークレット MIN このブックマークレットをブックマーク（お気に入
ウェブデザイナー必見、教育機関のウェブデザインで特に秀逸なもの30選
教育機関のウェブサイトというとガチガチに堅苦しく作られているイメージがありますが、ここでは大学や音楽学校、はたまたドラム教室やレーシングスクールといったもののウェブサイトの中でも優れたデザインのものを30種類リストアップしています。 どのサイトも見栄えのする美しい色合いで構成され、デザイン性に富んだフォントを多用しながらも見やすいので、これから教育機関などのウェブデザインをする場合、これらのデザインを覚えておくとアイデアの一助になるかもしれません。 秀逸な教育機関のウェブデザインは以下から。30 Exellent Web Design of Education Niche | Web Design Burn 01：Arte Indutora 02：Pray for 44 03：826CHI 04：Renewal Counseling Center 05：Upside Learning 06
ウェブサイトのユーザビリティ、とっても大切な20のポイント
ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの
newtwitterでアクセスできないメニュー項目があるんすけど…
newtwitterのデザインになじめなくて、それをこきおろすためにわざとやっているのではないのです。ホントーにわかんなくて困ってたのです。flyeagleさん、ssugeさん、その節はありがとうございました。。
2ch系ブログのヘッドラインが邪魔すぎる件
少ない労力で楽しめるので、私は2ch系ブログを見るのが大好きだ。だが、ひとつだけ激しくイラっと来る点がある。ヘッドラインコンテンツの扱いだ。 ブログ形式Webページ（２ペインだか３ペイン型）の、ヘッドラインコンテンツの扱いは、大まかに分けて３つのパターンに分けられると思う。 サイドバーペインに表示。普通のブログに多い形式。コンテンツペイン下部に表示。ヘッドラインというよりは関連コンテンツリスト？コンテンツペイン上部に表示。かなり邪魔。つうか自己主張しすぎ。Webページは通常縦長構成が基本なので、ページを開くと大抵の閲覧者はマウスホイールを回すだろう。くるくる。最新のエントリーが読める位置まで回すはずだ。くるくるくる。さて、このとき上に挙げたヘッドラインのうち(3)のパターンに「イラっと」来た人も多いと思う。うん、ほんと邪魔だしねアレ。 しかし、2ch系ブログのヘッドラインは(3)のウザさの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このページを見るには、ログインまたは登録してください
スマートフォン向けブックマークボタンからブックマーク出来ないページが有る
M/M (Paris)
https://jp.techcrunch.com/2011/06/01/20110531design-changes-the-way-we-experience-the-web/
takimura on Twitter: "NetwalkerとかMacBook Airを所持してからわかってきたけどフォントサイズが小さいのはこれからは望まれないな本当に。。標準12ptくらいがいいのかもしれない"
https://vikingkarwur.com/
iPhone生活
