オーベルジーヌ実食レポ 食べ物の鼻塩塩(未だに通じるのかな) オーベルジーヌというカレーをご存知だろうか 都内にあるデリバリー専門のカレー屋で、 ロケ弁などで大人気の本格欧風カレーが楽しめるらしい いいな〜 いいな〜オブザイヤー 都内の奴らはこんな良いモン食ってんのか 許せねえよ………
今回は,先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった,使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し,それをプログラミング言語であるところのJavaScriptを使って解決した,というお話です。 その問題とは,「文字の大きさ」に関するものです。 ブラウザには,文字のサイズを変更する機能が用意されています(図1)。例えばInternet Explorer(IE)なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが,「大きく」「小さく」というメニューになっており,より自由に表示サイズを変更することができます。 図1:ブラウザでは文字サイズを変更できる ちなみにOperaは
この連載では,エンジニアの視点から使いやすさを考えています。今回はユーザー登録画面などに代表される,フォームを使った入力画面について考えてみたいと思います。 なぜこのテーマを選んだかというと,フォームを介して利用者からデータを受け取って処理をして返すという一連の処理が,ウェブサイトのバックエンドの処理やデータ形式などによって変化しやすく,プログラマやエンジニアの作業がもっとも使いやすさと関係しやすい分野ではないかなあ,と思っているからです。こうした部分はエンジニアが使いやすさに寄与しやすい部分であり,もっと言えば,使いやすさを向上させるに当たって,エンジニアにしかできない事柄がたくさんある部分だってことになると思います。 今回は「ユーザー登録ページ」を例に,フォームにおける使い勝手を考えていきたいと思っています。その理由としてまずは,筆者が勤務する株式会社はてなにもユーザー登録画面があり,
連載第5回(「デザインのセンス,持ってますか?」)においてちょっと触れましたが,ウェブサイトを構築する際に,デザイナーとエンジニア(プログラマ)がかかわり,共同で作業を行うケースというのは少なくないと思います。これはもちろん,デザイナーとエンジニアがどちらもそれぞれ別のスキルを持っているからなのですが,それぞれのスキルや立場が異なるために,お互いにうまく意思疎通ができないケースも多いんじゃないかと思っています。 例えば,デザイナーの作成したウェブページのデザインが,システムを作る側からすると扱いづらい構成になっていたり,逆にエンジニアがシステムの修正や機能追加を行った際に行った表示上の変更が,デザイナーからすると許せないものだったり。そうでなくてもデザイナーの意図を読みきれていなかったり,といった感じで,お互いの作業が,相手の作業を阻害してしまったり,手戻りを発生させてしまうといった経験を
はてブクロニクル の方で、プロフィールアイコンについてまとめてみました。 http://chronicle.g.hatena.ne.jp/rikuo/200611 ただし、1600以上のユーザーアイコンを表示しているため、非常に重いのでご注意下さい。 あちらでまとめても良かったのですが、1日に投稿できる文字数がちょっとギリギリなので、アイコンのデザイン傾向についてはこちらでまとめてみます。 タイポグラフィ 文字による表現。これだけあれば英字や平仮名・漢字を上手く使って文章が作れそう。 数字 英字(1文字) 英字(複数文字) ひらがな カタカナ 漢字(1文字) 漢字(複数文字) gifアニメによる文字 その他(記号など) 参考リンク 断片部 - ano::プロフィール画像が文字の人 アスキーアート やや例外的ですが、アスキーアートが元になっているもの。 デフォルトのアイコンをアレンジ 矢印
お使いのブラウザの検索窓に、はてなの各サービスを簡単に追加できるようになりました 本日、はてなの各サービスで opensearch 用 XML の出力を開始しました。これにより、Firefox 2 や InternetExplorer 7 などのブラウザの検索窓に、はてな検索やはてなダイアリー日記内検索などを簡単に追加することができるようになります。 対応したサービスは以下の通りです。 はてなトップ 以下の「はてな検索」「人力検索はてな」を出力しています。 はてな検索 「はてな検索」を出力しています。ウェブ全体から検索します。Google 検索とはてなダイアリーキーワードやはてなブックマークのデータを掛け合わせた検索結果を見ることができます。 人力検索はてな 過去の質問から検索します。 はてなダイアリー ユーザーの日記において、「日記内検索」と「一覧検索」の2つを出力しています。「一覧検索
皆さん,はじめまして。このたび,「技術者視点のユーザビリティ考~使いやすいサイトへのアプローチ」というタイトルでこちらで連載させていただくことになった水野貴明です。私は株式会社はてなという会社でエンジニアとして働きながら,技術系のライターをやっています。株式会社はてなは,ブログサービスである「はてなダイアリー」や,ソーシャルブックマークサービス「はてなブックマーク」などのサービスをウェブ上で展開している会社です。 本連載では,ウェブ系のエンジニア(もう少し厳密に言えばプログラマやデータベース設計,システムデザインなどを行う人間)としての立場から,ウェブサイトの使いやすさをどのように実現していくのか,ということを,筆者の経験やそれを通じて考えたことなどを含めて,お話ししていければと思っています。よろしくおねがいします。 サイトの使いやすさはデザイナーの領域? まずは第1回ということで,ウェブ
僕も夜遅くだったり、朝早くおきたりしてみてました。後、下のようにはてなロゴを変えたり下げたりしてました。 第1戦 第2戦 第3戦 さて、ロゴについてですが、最後悔しいバージョンになってましたが、「勝った場合のロゴは作ってたの?」というコメントをもらってたのですが、今はもう普通のロゴに変わってしまってますが、ロゴのファイル名は http://www.hatena.ne.jp/images/top/h1_wcup.gif http://www.hatena.ne.jp/images/top/h1_wcup2.gif http://www.hatena.ne.jp/images/top/h1_wcup3.gif でした。残念ながら登場しませんでしたが、もう1つアップして備えてました。見たい方は次の番号に変えてもらえば見れますよ。(ちょっといまいちの出来ですが) 決勝トーナメント進出したり、ブラジ
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ
つまりはてなユーザーは他人の日記を見る場合、「@」の字を描きながらページ全体を見ているというわけ。 これは2320000000人の被験者を対象に行われたもので、大体100ページから重要なコンテンツを見つけるために20分から30分という昼休みの時間に驚異的な速度でページを見て目を回していくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で30段階のステップを踏んでおり、各段階を踏んでいった結果、「@」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。
はてなダイアリーで「このデザインは素敵だ!」と思われたダイアリーを教えていただけないでしょうか。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く