もう縦スクロールって疲れません？進化する私たちの指と視野｜ワカモノのトリセツ
こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション
違法アップロードサイトが人気なのは「無料だから」だけではない
ここ数日、違法漫画アップロードサイトが俄に話題だ。 皆いろいろと憤っている。当然だ。完全なる著作権侵害、知財の無断利用で金を儲けている奴など断じて許してはならぬ。別に違法サイトを擁護しようというつもりはさらさら無い。 が、それを前提にちょっと皆に聞いて欲しいことがある。どうしても言いたい事がある。 あそこの配信サイトもこの電子書籍ビューアも、お前ら全員もっと漫画村を見習えクソが！！ いやもう正直言って今更サイト名伏せる意味もそこまで無いやろと思うので特に伏せずに発言する。 漫画村は確かに違法サイトであり、「タダで漫画が読める」というのが一番大きなセールスポイントだ。しかし、だ。ハッキリ言うが漫画村は「タダで漫画が読める」という点を差っ引いても、下手な正規ルートよりよっぽどユーザーに優しい作りになっている。その事については強く主張したい。 私が漫画村という名前を知ったのは半年ほど前だ。確か「
【sketch】TwitterのUIトレースをして気がついた事｜Masaki
初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。 早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。 Twitterをトレースして気がついた事 左：元画像 右：トレース 1.フォントについてTwitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
iPhone SE - Apple（日本）
サクサク動くチップ。 進化したバッテリー。 5Gのスピード。 ずっと使えるデザイン。 スター級のカメラ。 おなじみのホームボタン。
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
UI考（番外編） AppleWatchについて、あまり語られてない視点 | fladdict
AppleWatchの発売まであと10日。「Apple Watch誰もつかわねーよ！」「いやiPhoneのときもみんなそういってたじゃん」という論争される今日この頃。 色々な立ち位置から多用な意見が展開されているが、いくつか大きなことが見落とされてると思う。特にスマホのUIUX系文脈で、一目瞭然性（グランサビリティ）とかワンタップといった、Appleのガイドラインをコピペしてるだけの人が多い印象。個人的に、もう少し気になっていることについてメモ。 「iPhoneは片手で操作できる」 vs 「AppleWatchは操作に両手を使う」 まず、Apple Wach本当に手早くハンディなのかについて。 Apple Wachの利点は、1アクションで「画面を表示できる」ことであり、1アクションで「操作できる」ではない。見落とされている点は、iPhoneは片手で操作できるということ。でもApple Wa
UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築 – ICS MEDIA
Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか？ Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Seleniu
第1回 安定とスピードのデザイン | gihyo.jp
ビジュアルデザインと機能性 ビジュアルデザインと機能性。ウェブサイトやアプリケーションのデザインでは、この２つは密接な関わりを持っています。 多くの人は、ビジュアルデザインと聞いて、ものを美しく（もしくは格好良く、楽しく）見せるためのデザインを連想するかもしれません。まさにそれはデザイナーの仕事です。世の中をより美しく、格好よく、楽しくすることは、人が関わるものを生み出すデザイナーにとっての使命です。それをないがしろにすれば、何のためのデザインか、何のためのデザイナーか、と問われることになるでしょう。 ただし、道具の世界では、デザインが機能性に直結しています。人は道具を使うとき、はっきりした目標を持って扱います（はさみを使って紙を切る、蛇口をひねって水を出す等）。そういった目標をどれだけ達成できたか、ストレスなく達成できたかという観点＝機能性は、道具の価値に関わってきます。ウェブサイト
【デザインまとめ】綺麗なデザインの管理画面 30選
以前記事にした「【デザインまとめ】綺麗なデザインの管理画面 40種類 」、時間が経ってリンク先が消えていたりしますね。 また綺麗なデザインの管理画面も追加したいと思います。 サムネイルだけで見ると、全部似たようなものに見えてきますが、デモサイトを見てみると細かな部分でデザイナーさんの個性が出ていて面白いです。 ご参考になれば幸いです。 左に紺か黒のナビがあるやつ ◆Material Admin デモサイト ◆Edumix 黄緑がきれい デモサイト ◆Make デモサイト ◆Con デモサイト メガネのロゴがかわいい ◆Mega デモサイト 黒でメリハリ ◆Admin box デモサイト ちょっとレトロ感ある色遣いが印象的。 ◆Singular デモサイト やわらかな色遣い。 ◆Azan デモサイト ◆Brio Web App デモサイト 丸みの強い要素がかわいい ◆HeyMetro デモサ
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
x.com
UX MILK
Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ
Online Mockup, Wireframe & UI Prototyping Tool
