ナビゲーション/メニューのiPhoneアプリデザイン集22選
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
M+ WEB FONTS
Index of /webfonts NameLast modifiedSizeDescription Parent Directory - basic_latin/2018-02-01 18:45 - general-j/2018-02-01 18:45 - multi_latin/2018-02-01 18:45 - sample-j/2017-11-01 11:46 - Apache/2.4.10 (Debian) Server at mplus-fonts.osdn.jp Port 80
AngularJSの設計思想 [Google I/O 2013] - ワザノバ | wazanova.jp
[Video] https://www.youtube.com/watch?v=HCR7i5F5L8c AngularJSのHype (盛り上がり感)があるようなので、GoogleのMisko HeveryとBrad GreenがGoogle I/O 2013でAngularJSの設計思想について語っているのを紹介します。 アプリ開発は、雛形構文（ボイラープレート）を利用しながらデータをブラウザとDBの間でやりとりさせるのが中心で、気づいてみると同じ雛形構文を書く作業をかなり繰り返している。コードを書いてる時間よりもコードを読んでいる方に時間がとられることも多い。この雛形構文を使った作業を極力減らして、アプリに付加価値をもたらすコーディング作業だけを抽出したいと思った。 コーディング作業が効率的になる構造が欲しかった。 フレームワークにテストを組み込むが、フレームワーク自身をきっちりテスト
UIが変わる度に文句いう人 - 良いあそなすちゃん
iOSを始め最近あちこちのWebサービスでUIが変わり始めていますね。UIが変わる度に主にTwitterで文句を垂れる人がいるけど、じゃあ、お前の中でどうなったら最適なUIなのかをブログにかいてくれよ。って僕はいつも思ってる。UIが変わる度に条件反射でTwitter開いて「クソUI」の4文字をテキストエリアに叩きこむ余裕があるなら、UIが変わった理由を考えてほしいし、ちゃんと客観的な理由でクソであるんだったら「クソUI」の4文字を許容できると思う。WebサービスのUIが変わる度に思考停止気味な「クソUI」の文字列にうんざりするし、僕が1番危惧しているのは、思考停止の塊の連中がうだうだ言うせいで、Webサービスのユーザの幸せを願ってUIの改善に注力しているチームがUIを改善することに抵抗を感じてしまうとそれはもうWebサービスっていうかものづくりの破滅の始まりだ。 慣れたUIがいい人達、必要
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
Beenos （ビーノス） | 創業者がUX（ユーザーエクスペリエンス）の全責任を背負うべき
創業者がUX（ユーザーエクスペリエンス）の全責任を背負うべき. By beenos Posted in - news & Specialist on 10月 2nd, 2013 山本 郁也/Fumiya Yamamoto Design Fellow 株式会社ネットプライスドットコム Beenos本部 楽天株式会社や株式会社ビジネス・アーキテクツを経て株式会社ネコメシへ合流後、並行してBeenosへ参画。 Beenos本部にて、IA/UXデザイン、ユーザビリティエンジニアリングの領域から、Webサービス開発支援を行う。人間中心設計推進機構正会員。 ヒューマンインターフェース学会正会員。UX Tokyo所属。 スタートアップ時に創業メンバーが知っておく最低限のＵＸ構築法とは？ スタートアップのチーム・サービスを今までにたくさん見てきて、デザインを構築するにあたり陥りがちな落とし穴と最低限
富士通らくらくホンに見る高齢者に使いやすいUIのあり方 - A Successful Failure
2013年10月02日 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 Tweet 高齢者にも使いやすい携帯電話といえば、富士通のらくらくホンシリーズが有名だが、総務省のICT超高齢社会構想会議の第4回WGにて、富士通研究所の石垣一司氏が高齢者のICT活用について 富士通（研究所）の取組ご紹介と題し、同社の取り組みの紹介を行っている。 非常に示唆に富んだ良い資料であるので、本エントリでは同資料を引用して、高齢者に使いやすいUIの勘所について考えてみたい。本エントリ内の図表は同資料からの引用である。 加齢に伴う身体機能の低下 加齢に伴い身体能力が低下することは誰もが体感することだが、具体的には次のような形として現れる（高齢者にとってのユーザビリティ）。 視覚機能の低下 老眼による近視力の低下 暗順応の低下 視野の狭まり 短い波長の色（青、緑）の感度低下 聴覚機能の低下 高い周波数帯の
iOS 7 の UI が分かりにくいワケ
［iOS の UIPicker を比較する］ 新しい iOS 7 の UI が識別しにくいと思っていたら、Sean Woodhouse がデベロッパの立場から同じことを指摘している。 iOS 6 と iOS 7 の UIPicker の違いを比較したものだ。 Itty Bitty Labs: “Lifting the lid on the iOS 7 UIPicker” by Sean Woodhouse: 30 September 2013 ＊ ＊ ＊ やっと iOS 7 ピッカーがよくなった？ iOS 7 の見かけが大きく変わった原因のひとつは UIPicker（およびその関連で UIDatePicker も）がフラットになったことだ。新しいピッカーは表面上はよりクリーンになったように見える。自分は iOS 6 のピッカーのビジュアル偏重と疑似３次元回転効果が好きではな
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
Shunter.jp - 楽天のトップページを内容を変えずに、外観だけ変えてどれだけ見やすくなるか試してみました。
フルサイズ 変更前 まえがき なんで楽天？？ すみません、何かのご縁だと思いますが、セミナーを受けていたら調度思いついた感じです。 先日データサイエンスの始め方・データ分析のデザインパターンというセミナーに参加してきました。 その中で一番私の印象に残ったのが、最後のプレゼンテーションで「楽天」のサイトのデザインについてでした。 内容は簡単に言うと、『「おもてなし」をしましょう。そのためにユーザの感情をデータからモデル化することを目指す！』という話だったと認識しています。 「おもてなし」という考え方は、とても共感しました。ユーザにとっていい物をという思想は常に持っていたい所存です。 当該プレゼンテーションの中では、ホテルのバスタオルの再利用を促すための張り紙を１つの例として扱い 、ユーザとの接し方を変える事でユーザの行動が大きく変わる事をこのことを説明されていました。 この話での、具体的な比
デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー１：現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？ 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」（＝影）の基本ルールです。
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
入力フォームの迷宮。全角数字を強要するフォームを理解できません。 | SHINGO IRIE
前々から思っていたんですが、住所を入力する際に全角で入れてくださいという指定をされていることがよくあります。これ、毎回イラッとします。 住所が全角だろうが半角だろうが、システム側で勝手に変換制御してくれよって思います。システム上、全角でないとマズイかどうかは利用者にとっては関係のないことです。 例えば、住所が福岡市天神1-2-3だった場合、福岡市天神１−２−３と入れなおす。そうすると−が全角ではありません。と出てきたり…。この「ー」もたくさん候補があるので、どれが全角だったっけ…と何度か試すこともあったり。まぁ、１丁目２番地３と書けばいいんですが。かたや、電話番号は半角で入れてくださいとか、まぎらわしい。 そのほか「住所の文字数がオーバーしています」って出てきたこともあります。マンション名が記入できませんでした。しょうがないので、マンション名をイニシャルで省略しました。小さなことかもしれま
【検証】クリックされるボタンの色は？ | WebNAUT
検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 ＞ WebNAUT ＞ なめぱら という結
第1回 気持ち良さはどこからくるのか～身体に近づくUIへ | gihyo.jp
UI/UXは進歩の激しい領域のために、時に前例なしの設計が求められることがあります。たとえば近年の例では、スマートフォンやタブレットが急速に普及し、まだノウハウのない中でこれらのデバイスに特化したUI/UXが求められました。これからも誰も触れたことないデバイスや状況でも、的確な設計を行うことが求められます。 そういった未踏の領域では、先端の研究領域に注意を向ける一方、UI/UXの原点を学ぶ必要があります。本コラムではインタラクションの研究者という立場から、これまでのUI/UXにおいて何が本質であるかを知るのと同時に、これから向かう未来を見据えながら、今何を学ぶべきかを分析、考察していきます。そしてUI/UXに携わる人に少しでもUI/UX設計の「なぜ」に答える材料になればと思います。 効率だけでは語れない道具の設計 スマートフォンやタブレットなど、高性能な端末を持ち歩く時代となりました。ネッ
ソシオメディア | メタファからイディオムへ
「フラットデザインはUIを進化させるか」では、フラットデザインの特徴を述べると同時に、これからUIが進んでいくであろうモードレスデザインとの関係について触れました。 今回はその裏にある、UIデザインの本質的な要素の捉え方について、メタファとイディオムという観点から掘り下げてみます。またそこから導かれる、開発プロジェクトにおけるUIデザインの位置づけについても考えてみます。 スキュアモーフィック → フラット フラットデザインと呼ばれる平面的で抽象的なUIのビジュアル表現は、装飾的で写実的なスキュアモーフィックデザイン（現実の物の形や質感を模した表現）に対するカウンターとして注目されています。 つまり、「スキュアモーフィックからフラットへ」というトレンドの変化です。 フラットデザインは、単に見た目に新鮮であるだけでなく、UIオブジェクトから例えばドロップシャドウ、テクスチャ、境界線といった装
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイデアの宝庫！CSS3を使ったUI表現・テクニック集
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜
