https://www.operator.com/
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
UIデザインで使いたいアプリケーション(止まっている状態のUI制作関連編) #2014.09版 - たぶん、ねむたくなる
UIデザイナー向けのアプリケーションやツール、プラグインについて 定番含め網羅的にまとまってる記事って見たことないなーと思ったので とりあえず作ってみました。(すごく長くなってしまったので記事分けしました) 僕がMacユーザーということもあり、8,9割はMac寄りの選定になっています。 その辺はご了承の上ご覧くださいませ mm (参考までに現在私が使っているものには“※”をつけました) ということで、第1弾 “止まっている状態のUI制作関連” です。 UI制作系アプリケーション Adobe Photoshop ※ デザイナー定番のビットマップ画像編集アプリケーション。 デファクトスタンダード的存在でプラグインなども多い。 慣れの問題含めこれ以外を使う理由が無いためだいたいこれ。 Windows : 可 Adobe Illustrator ※ デザイナー定番のベクター画像編集アプリケーション
Prott - Prototyping tool for Web iOS Android apps
Design awesome products, with your team. Maximize your team’s superpowers and keep everyone engaged - from first idea to pixel perfect.Get started now!Get started now!Get started now! HAVE FUN! Make your process as awesome as your product. Keep miscommunication, technology failures and folder chaos from spoiling the fun. Enjoy the process, with Prott! Get the best out of your team Within every tea
web開発者のための さまざまな動きを表現できるチュートリアルまとめ「30 Fresh Articles and Tutorials for Web Designers」
web開発者のための さまざまな動きを表現できるチュートリアルまとめ「30 Fresh Articles and Tutorials for Web Designers」 webサイトを魅力的に見せるためには、デザインはもちろん、動きにも力を入れたいもの。シンプルなフラットデザインが主流となっているため、特に重要な要素となってきているのではないでしょうか？今回はそんな時に参考にしたい、さまざまな動きを表現できるチュートリアルまとめ「30 Fresh Articles and Tutorials for Web Designers」を紹介したいと思います。 Stylish CSS Buttons いろいろなパーツに動きや、エフェクトを加えられるチュートリアルが多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Page Preloading
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
UXデザインというものについて - yzgwyskw
UXという言葉は非常に誤解されているように感じます。これはUX〇〇を単にUXと言ってしまう軽率な省略によって引き起こされているのではないかと思っています。この省略のために、UXというのは結局なんなのか？という疑問を引き起こしているように感じています。この文章は、そういう疑問を持っていた一年前くらいに自分に対して説明を行うような気持ちで書きました。ただし、私は仕事としてUXを扱っておらず、自分の理解を整理するためにここで文章にしていることを留意ください。 UXとは そもそも、UXというのは"ユーザが製品に触れている際に経験する知覚や感情"であり"現実世界に起こっている事象"です。ここで重要なのは、UXは単に事象でありその他の意味は含まれていないということです。直感的といった曖昧な言葉がUXの形容詞として用いられていることが多いため、使いやすくなければUXでないような印象があるかもしれませんが
おかんでもわかるUXデザイン Version 0.1 - ネコメシCEOブログ
3/24、TAM Coworkingをお借りして、「おかんでもわかるUXデザイン」というセミナーを自分で主催して実施しました。これ、ゆくゆくはマジでおかんでもわかるようにしたいんだけども（ようは、専門家じゃない人向けということですが）、まずはそのたたき台という感じで（だからVersion 0.1）、単にUXデザインって何よっていうのを単純化しただけの内容になっていて、完全におかんを突き放しているという、タイトルに偽りアリのものとなっております。 Version 0.1とはいえ、まー、UXデザインやってみたいけどやったこと無い人とか、何したらいいのかわからん人とかにとっては、ひとつの道しるべになるかもしれないので、スライドを公開する次第なのですが、本気で本職でUXデザインしてる人とか、アーキテクト的な人とか、そゆ人たちが見たら憤慨しそうなくらいに単純化しております。ツッコミどころ満載かと思い
奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
【追記】Twitterで教えてもらったのですが、13行が改善されて3行になってました。ご対応頂いた市役所のご担当者様、富士通のご担当者様、お疲れ様でした。今後とも、よろしくお願いいたします。【追記終わり】 住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな～って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくず食い過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事の流儀とか、そういうのあるじゃないですか。使いやすいサイトを作りたい人、ある程度ユーザビリティを犠牲にするけどかっこいいサイトを作る人、でもこれ酷いでしょ。誰もパンくず13段にしろなんて望んでな
ECサイトのUXデザイントレンド： 追随すべきもの3つと敬遠すべきもの3つ
最新のeコマース調査で明らかになったのは、商品画像が大きくなり、レビューが充実して、割引が使いやすくなるなど、ショッピングサイトのユーザーエクスペリエンスが改善したということである。しかし、新しいデザインは、商品情報の非表示、サイトからの貧弱なフィードバック、カスタマーサービスエリアの情報過密といった問題も抱えている。 Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid by Amy Schade on January 26, 2014 日本語版2014年3月11日公開 最近、eコマースユーザーエクスペリエンスレポートのシリーズをアップデートしているのだが、デザインの改善が見られることに我々は勇気づけられている。その一方、従来からの問題がまだ残っていることや、新たな問題も出てきていることにはがっかりした。 前回のeコマース調査の結果
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof
テキストを読ませる系のブログの背景を白以外にしてるやつ、読ませる気ねえの？
オシャレ（）とか思ってんの素直に読みにくいよ。特に黒多いな、緑とか赤とか問題外だから、あと行は４０文字までにしろや。こんなのもう１０年前からそういうふうに決まってんだツイートする
Webサイトに変なスクロール使うのをやめろ
最近変なスクロールを使ってるサイトを見る。 これとか http://www.apple.com/iphone-5s/ これとか http://heteml.jp/ 他にも色々。 Javascriptがなんか頑張ってんだろうけどさ、 正直鬱陶しいよ。 やけに重いし、使いづらいし。 Chromeだとヌルヌル動くって？ みんなChrome使ってる思ってたらアカンでほんま。 追記： この変なスクロールはパララックスと言うそうです。 「この変なスクロール＝パララックス」ではないそうです。 また、「この変なスクロール＝パララックスのひとつ」と言う訳でもないみたいです。 ごめんね、もうこの追記消したい気分。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ
カスタマージャーニーマップとは？ UX向上を達成する7つの事例と作成方法 | 実践！ プロも使うラピッドUX手法
新着記事
