マテリアルデザインを用いたデザインリニューアル [フリル編]
This document discusses the architecture and development of Tabelog, a restaurant review and recommendation website from Japan. It notes that Tabelog uses Rails for its frontend application and a custom framework called Cobqlo for its backend services. It has divided its model, view, and controller logic between these two frameworks to improve scalability. The backend services communicate with the
![マテリアルデザインを用いたデザインリニューアル [フリル編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/76b9f2cd58f69ba8f3d551f88dcafb865fb05912/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fdroidkaigi-150425032816-conversion-gate02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
プロ野球をデザイン的に見てみよう 〜カウント表記編〜 | WebNAUT by Beeworks
今回は、「野球は好きだけどデザインについてはよくわからない・・」 もしくは「デザインは知っているけれど野球には詳しくない・・」 というどちらの人も楽しめる、野球に関するデザインの話をしてみようかと思います。 シーズンが終わってから時間をもてあましている方、ストーブリーグだけじゃ冬はしのげないよという方、ぜひ暇つぶしにご覧ください！ 目次 カウント表記とは？ 必要な情報とデザインのポイント 情報内容が変わったら？ 〜別タイプのデザイン例〜 まとめ 〜オリジナルデザインを作ってみよう〜 カウント表記とは？ どうも！ 野球大好き デザイナーの川野です。 突然ですがみなさん、 「プロ野球中継画面のカウント表記」について注目したことはございますか？ 「ん？何それ？」と思った方… コレのことです！ テレビ画面の端っこによく出ているゲーム情報のことですね！ 正式な名前はわかりませんので、ここでは便宜上「
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
アプリのUI設計は「紙でやる」のが早い！ - Qiita
#はじめに こんにちはー！！ UI設計やってますか？ 今回は「ペーパープロトタイピング」の話。 アプリでは主流になってる現場も少なくないですよね！ 今までのやり方とペーパープロトタイピングの違いや、 プロトタイピングツール「POP」と「Prott」の比較の話なんかをしようと思います！ #今までのアプリUI設計 Webデザインと同じ方法でアプリ設計を行っている場合、手順は ●ワイヤフレーム→モックアップ→実装 厳密に言うと ●①ヒアリング→②ワイヤフレーム→③レビュー→④モックアップ→⑤レビュー→⑥実装→⑦レビュー デザイナーがいないと ●①ヒアリング→②ExcelでUI設計→③レビュー→④実装→⑤レビュー って場合も結構多いと思います。 これ結構時間かかりますよね～。 しかも！ 大抵の場合、実装後のレビューの段階（つまり最終段階）で 「やっぱここ動きおかしいよね！直せる？」 「・・・。（え
iPhoneアプリ「少年ジャンプ＋」のUIが意味不明すぎる - UXエンジニアになりたい人のブログ
端的に言うと、買ったやつ（購入済みアイテム的なもの）をどうやって見るかで相当迷った。 顛末 こち亀の1〜100巻が無料で読めるキャンペーンがあって、iPhoneアプリ「少年ジャンプ＋」だとダウンロードして読めるってことなので、何冊かダウンロードしたんです（ちなみに、キャンペーンはもう終わってますごめんなさい。わたしも今日知ったのです＞＜） キャンペーン期間中はトップページにこち亀全巻無料バナーが張ってあって、そこから読めたのです*1が、本日(10/18）の16時の無料期限後、バナーがなくなって導線がどっかいっちゃったのです。 現在のアプリ画面 これがトップページ。 アプリトップ 左右フリックで画面が切り替わります(タブ的なイメージ。この画面だと、左フリックで「連載陣」に、右フリックで「週刊少年ジャンプ」へ) 「連載陣」タブ。一話単位で買って読むことができるようだ(後述するがこの機能は実はも
成功したがゆえに崩壊しつつあるiOSのシンプル哲学 - UXエンジニアになりたい人のブログ
前回こんな記事を書いた。要約すると「戻る」に手が届かねえって話。 同意も多かったのだが、「左端をエッジスワイプで戻る」が実装されている、というコメントを多くもらった。試してみたところ。。。。おお！すごい！たしかに！iOS7からNavigationControllerのデフォルトの挙動として実装されてるらしい*1。 で、これやってみた人いる？なんかやりづらくなかったですか？やりづらかったですよね？やりづらかったことにしましょう。その経緯とそこから広げて色々書いてみようと思うので！ 長いですごめんなさい。崩壊の話が聞きたい人は「行き詰まり」から読みましょう。 なぜエッジスワイプはやりづらいのか そもそもスワイプとエッジスワイプの違いはわりと難しい。 スワイプは真ん中辺りにポイントして、上下左右に動かす。エッジスワイプは端にポイントして、内側に動かす。 スワイプとエッジスワイプ このブログに来る
アプリデザインの参考になるUI/UXデザインギャラリーサイト10選 - 株式会社モンスターラボ
オンボーディングのUXデザインの参考になる海外Webサイト 「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。 いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。 オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。 アプリデザインまとめ① User Onboarding 「User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。 オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。 サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人で
アニメーション表示のプログレスバーをどうすれば体感速度がアップするのかが判明
ファイルをダウンロードする時やソフトウェアをインストールする際によく目にするのが進捗度合いを示すプログレスバーですが、このプログレスバーの表示にアニメーション効果を加えることで、処理の体感速度を実際よりも早く感じさせる効果があることがわかりました。 ProgressBarsVisualCHIv15CAMERA1 - ProgressBarsHarrison.pdf (PDFファイル) http://chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf カーネギーメロン大学コンピュータサイエンス学科 Human-Computer Interaction Instituteの研究チームは、次の3種類のバーを比較して実験を行いました。 実験では、この3種類のバーをそれぞれ比較させることで、その効果の違いを浮き彫りにして
UIとしてのスプラッシュ画面 | UXデザイン会社Standardのブログ
アプリケーションを起動した時に表示される画面をスプラッシュ（Splash）画面、またはローンチスクリーン（Launch Screen）と呼びます。アプリケーションにおいては、ユーザーが操作することのできない数少ない画面でもあります。 iOSではこのスプラッシュ画面はストア申請時に必須であり、使用するアプリケーションの向きや、対応デバイスのサイズに適しているものを提供する必要があります。個人的感覚ではありますが、いつもアプリケーションのビジュアルデザインや、アイコンのデザインが完了した後に即興で作られるということが多いのではないでしょうか。しかし、適当にスプラッシュ画面を作成するのではなく、サービスの性質や通信の有無などを考慮してデザインする必要があります。 ここで一旦、AppleのHuman Interface Guidelineを見てみましょう。 起動画像は、アプリケーションが起動するま
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
副業鑑定リスト | 怪しい副業・詐欺案件を徹底的に鑑定します
副業詐欺🔍鑑定団の山口です。 記事を最後まで読んでいただき、 ありがとうございます😊 インターネットを活用した副業は、正しい情報を選べば一気に稼ぐことができるんですが、ネットの情報を見てると「これ怪しいな…」と感じるものが多くて、不安になりますよね。 私も以前、怪しい副業に引っかかってしまって「もう副業はやめようかな…」と思ったことがあり、紆余曲折ありました…。 でも今思えば、その経験があったからこそ自分の中で成功したと実感でき、今では毎月７桁以上の収益を得ています。 もし「副収入が欲しい、でも何から始めればいいか分からない」と悩んだときは気軽にご相談ください😌 興味があれば、短期間で収益がグンと上がっている鑑定済みの案件など、ご紹介もできます。 詳しいことは LINEから お気軽にどうぞ👍 プロフィールを詳しく見る ▶︎
ユーザー体験設計を軸にすすめるサービスデザイン
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
勝手にリデザイン：新宿高層ビルの館内施設案内板
勝手にリデザイン：新宿高層ビルの館内施設案内板 新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました time2011/09/08 hatenabookmark- Twitterで、あるサイン（案内板）のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方
UXを損ねる最悪なグロースハック
この記事は以下に移転しました。 http://lambda-structure-design.jp/lab/growth-hack-is-bad/
ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは
PCを操作するキーボードやタッチパネル、自動車を運転する時のハンドルやペダル類、あるいはウェブページの操作画面など、ユーザーが何かを操作したり情報をやりとりする際に触れる部分は総称してユーザインタフェース(UI)と呼ばれており、その仕上がり具合によっては製品の評価が大きく左右されることもあります。製品企画をおこなう際には重要な項目の1つとなっているUI設計ですが、特にウェブサイトにおけるUI品質を高めるための手法がYouTubeで公開されています。 The User is Drunk - YouTube 優れたユーザーインターフェースデザインの手法について語るのはウィル・デイブルさん。オーストラリア・メルボルンのウェブコンサルタント企業であるSquareweaveを率いる1人です。 デイブルさんが唱える手法とは、「ユーザーはお酒に酔っ払っている」と仮定してインターフェースを設計する「The
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ
セキュリティ診断・検査のGMOサイバーセキュリティ byイエラエ
工学院大学
