UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
マクドナルドと任天堂：人気ブランドのWebデザインに見られる共通点 | Web Design Trends
マクドナルドのWebデザイン マクドナルドはファストフードの中でも代表的なブランドで、若者から年配の方まで幅広い層に愛されるハンバーガーチェーンです。 そんな日本マクドナルドの公式サイトのWebデザインが最近リニューアルされました。飲食チェーンのWebサイトと言えば予算の都合上そこそこのクオリティで、かつ管理しやすいようにテンプレートを活用したWebサイトが多い印象がありますが、マクドナルドのWebサイトはデザインのクオリティが非常に高く、競合チェーンと比べるととても作り込まれたWebサイトであることが分かります。。 Nintendo SwitchのWebデザイン 任天堂といえば、2017年にSwitchを発売し、一時は入手が難しくなるほどの人気ゲーム機となりました。 このSwitchのWebサイトのデザインが優れており、1人で集中して遊んだり、大人数で遊んだり、家族で遊んだりなど、Nin
ブーム到来か。ノングリッドデザインの魅力と参考になるWebサイト | Web Design Trends
既存の枠に囚われず、自由に画像やテキストをレイアウトする「ノングリッドデザイン」のWebサイトがここ最近で多く見られるようになってきました。 近年オリジナリティがWebデザインに強く求められるようになってきていて、従来のルールに従わず、個性を強調したようなWebサイトが増えてきていますが、ノングリッドデザインはまさにその特徴的な例の1つです。 今回はノングリッドデザインについて詳しくご紹介していきたいと思います。 2019年に流行するWebデザインの最新トレンド18個まとめ そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか... Web Design Trends ノングリッドデザインとは 一般的なWebサイトでは、縦方向や横方向に区切って
フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか
フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。 Your Brain on Front-End Development 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインがあがってきた！ 複数行のテキストの長さに沿った背景 ヘッダはFlexboxで レイアウトはCSS Gridで 縦書きの要素 テキストの省略 カスタム フォント 画像上のテキスト SVGアイコン・レイティング ハンバーガーメニュー デザインがあがってきた！ フロントエンド デベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出す
UIリニューアルで回遊率2倍！iPadでパッと広がるAbemaTVの世界 | CyberAgent Developers Blog
こんにちは！AbemaTV UIデザイナーの丸です。 突然ですが、「iPad」使ってますか？ iPadはApple社が提供するタブレット型端末です。 タブレット型端末としては800万台を超える国内年間出荷台数のうち40%のシェアを占めると言われています。 AbemaTVにおいても、MAU1000万のうち約13%のユーザーがタブレットを使って視聴しています。 （2017年12月時点 参照 : http://pdf.cyberagent.co.jp/C4751/UV5D/slVL/QUdv.pdf) そう、 すげぇ使われてる。 んです。すげえ。 AbemaTVはiPadにも対応しているのですが、 このすげぇ使われてるiPad、もっと良くしない手はない！ということで、 この度AbemaTV開局2周年のタイミングに合わせて、 iPadアプリのデザインリニューアルを行いました。 結論から言うと、今回
LINE 桜川さんの話す「もっと読んでもらうための工夫」が実用的すぎてめちゃいい #AWAsia #LINE_AWA - @d_tettu blog
2018年5月14日〜16日に、東京ミッドタウンで開催されているAd Week Asia。会社の偉い人から関係者向けのチケットをもらったので行ってきました。 何を聞こうかな〜とパンフレットに目を通していたら「スマホ時代のコンテンツデザイン」なる講演を発見。LINE・桜川さんのお話がめちゃ良かったのでメモを残しておきます。 こんな風に「より届けるべき人に届ける、よく読んでもらうために何をするべきか？」を考え続けてるのいいな〜。みんな読んでね。 ちなみにほか記事は以下 Googleは、機械学習でどうマーケティングを変えようとしているのか #AWAsia - @d_tettu blog 6秒でメッセージを届ける方法とはーーYouTube動画広告の効果的な作り方 #AWAsia - @d_tettu blog 「伝える」は奥が深い。メディア編集者3人が語る”これからのストーリーテリング” #AWA
みなさんが「ここの作成会社はいいサイト作ってるなー」って感じるweb作成会社を教えてください。いろいろ探してるけど、いかにも商業的で微妙なやっつけ仕事の会社しか見当たらないです。カヤックやキノトロープなどの大手よりも、できれば小規模の会社で教えてくれると嬉しいです。よろちく
みなさんが「ここの作成会社はいいサイト作ってるなー」って感じるweb作成会社を教えてください。 いろいろ探してるけど、いかにも商業的で微妙なやっつけ仕事の会社しか見当たらないです。 カヤックやキノトロープなどの大手よりも、できれば小規模の会社で教えてくれると嬉しいです。 よろちく
動きとレイアウトがイケてるWebサイト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのタリーです。 僕は1日1サイト、その日、自分なりにいいと思ったサイトをストックしています。いいものを見る癖をつけることで、日々のデザインのクオリティーにもつながってくると考えるからです。 今回は日々のサイト収集したものから、動きがあることでデザインが映えるサイトをご紹介いたします。 それでは行ってみましょう！ おすっ！ 201° インテリア・建築のデザインを手がけるDRAFTが新たに立ち上げた、プロダクトブランドのサイトです。 スクロールの動きに合わせて画面全体のレイアウトが変化します。 スクロールで画像が収まっていくような動きで、サイトの世界観を表現しています。 スクロールスピードをあえて抑えることにより、 写真1枚1枚に目が行き届くようになっています。 https://201d.jp/ SUPERCROWDS Webデザイン、UI・UX設計、CI・VIデザイン
たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
ランディングページのデザインに必要な7つの心がけ | ベイジの日報
これまで何度もランディングページ制作に携わる機会があったが、特に入社して1年ほどはうまくデザインをまとめることができず、苦しい思いをすることが多かった。 つまずいたことを思い返すと数え切れない。訴求ポイントをしっかり把握しないまま手を動かしていたこと、提供された原稿やワイヤーフレームをそのまま反映して発想に自由さがなかったこと、表現の引き出しが少なく全体的にワンパターンになることなどは、特に記憶している。 しかし2年の経験を重ねた今は自分なりに気をつけるポイントが見えてきた。そこに注意することで、魅力的で内容が伝わりやすいデザインに仕上げることができる。振り返りとして、私が心がけているポイントをまとめてみたい。 1. 細かい説明を読ませる前に見出しで結論を伝える 内容に興味を持ってもらうためには、まずタイトルに目を留めてもらわなければならない。提供された原稿に見出しが無い場合、必ず結論やユ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年のモダンCSS - TechFeed Conference 2022
東京オリンピックのボランティア応募ページが『webサイトでやっちゃダメな事を全部やっている』らしい「応募の時点で根性試されてる」 - Togetter
【完全保存2018年版】初心者必見！作業効率アップ！Photoshop/Lightroomアクション オススメTOPサイト7選 – 無料＆有料【写真加工/方法/使い方】 | WebDesignFacts
http://www.north-geek.com/
Webサイトで視覚的なインパクトを強く残したいときに効果的なヒーローイメージとは？ | Webデザイン、これからどうなるの？（全10回）
「出会えたことに感謝したいCSSベスト3」まとめ
画面サイズのレスポンシブデザインはなぜ必要? 対応が必須となったいま求められること | Webデザイン、これからどうなるの？（全10回）
The Blog | Welcome to Adobe Blog
