PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集
作成：2017/09/11 Webデザイン > 「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 近年増えてきたファーストビューのレイアウトは スプリットスクリーン（分割） シネマグラフ 縦書きのGナビゲーション 画像とテキストを一部だけレイヤー 不規則な配置 アニメーション 鮮やかな配色のグラデーション デュオトーン イラスト ラインアート といった感じなので、今回はこのあたりから少しだけ遊び心があるものをまとめます。 スプリットスクリーン なぜかファーストビューがパッとしない時があります。要因の一つとして写真が抽象的（主張がない）で、フルスクリー
UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」
TightenやLaravelのデザインを担当したSteve Schoger(@steveschoger)さんによる、ビジュアルデザインにおけるコツをまとめたモーメント「Little UI Details」が公開されています。 Little UI Details https://twitter.com/i/moments/880688233641848832 明るい背景色上に白色のテキストを追加する場合、微妙に影を付けると、文字が見えやすくなるだけでなくよりポップになります。 Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more. pic.twitter.com/p9rudeFxvP— Steve Scho
ユーザーの動き。｜CSS HappyLife
ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22：47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック＝トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン（ドロップダウン）型メニューは、近くのボタンを押
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
Webデザイン エンジニアリング 第16回 ボタンを押させるテクニック：ITpro
対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。 わかりやすいボタンの形状はユーザーによって違う まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。 上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。 しかし，PCに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソシオメディア | UIデザインパターン