【読書メモ】インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針 | Yunicode
インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針 感想後半の「どう感じるか」「どう決断するのか」あたりはほとんど自分にも当てはまっている事柄で納得感が強い。「人ってこういうもんなんだな」というのを再認識できたのと、自分の単純さ（セオリー通りの人間…）がわかり面白かったです。よくできているアプリが実際にここに書かれているようなポイントを織り込んだ作りになっているなあ。新しいプロダクトを作るときはもちろん、普通に心理学として読んでも新たな気づきと出会える。 以下、自分用要約まとめ。 人はどう見るのか目から受け取る情報と脳が私たちに伝える情報は微妙に違うウェブページを閲覧する人は予想や期待とは違った見方をするかもしれない表現の仕方次第では自分が希望する通りの捉え方をしてもらえない恐れもある対象の「あらまし」をつかむのは中心視野より周辺視野の役目２種類の視野中心視
bootstrap3でのサイト作成時の所感 - Qiita
ゲームの紹介サイトを作成している際に気になったことを共有します。 bootstrap3を活用すると、スマートフォン、タブレット、PCのどれでも見やすいサイトが作成できます。 作成しましたサイトはこちらとなります。 - 世界は今日も夢を見る。 http://plus.next-soft.net/SekaYume/ bootstrap3について 2014年11月現在。Currently v3.3.1 http://getbootstrap.com/ なお、2013-08 にbootstrap 3はリリースされています。 移行時に気になったこと 以前にbootstrap2でおおよその枠組みを作っていましたが、bootstrap3が主流になってしまったので急遽差し替えました。 bootstrap3になって、設置方法、cssでの呼び出し方について大幅刷新されたため、 基本コンセプト以外はすべて覚えな
もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -
Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
Icon Animations Powered by mo.js | Codrops
Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn. Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the li
UI/UXデザイン制作の参考に！見てるだけでも楽しいアプリデザインのギャラリーサイト９選 | SONICMOOV LAB
こんにちは。デザイナーのユウコです。 今回は、スマートフォンアプリのUIデザインの時に参考になるギャラリーサイトを集めてみました。 関連：様々なインタラクションを確認できるアプリギャラリーサイトUI Sources 目次 世界のクリエイター作品が集うギャラリーサイト Behance dribbble Pintarest UIデザインのパターン集 pttrns lovoly ui MOBILE PATTERNS アプリアイコンとスクリーンショット集 iconDrop iconsfeed App Screenshot 世界のクリエイター作品が集うギャラリーサイト まずは、世界中のクリエイターの優れたデザインが楽しめるサイトから3つをご紹介します。 これらはアプリ専門のサイト集ではありませんが、タグなどで絞り込むことで、アイデアにあふれるアプリの画面デザインをたくさん見ることができます。 Beh
企画書に説得力を。Webディレクターが日々仕入れておきたい情報満載のメディアサイト私選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのあゆみです。 「企画書に、あと一歩強い説得材料が欲しい！」「先方から追加で相談がきたけど、一口にディレクターといってもそこまでは知らないよ！ でも頑張ってベストな提案で戻したい」っていうやきもきすることってありませんか？ そんなとき、「ああ、このデータ最高！」「この考え方やそれに基づいた動き、むっちゃいい！」といったアイデアをくれる救いのサイトたちがあるんです。 わたしは「困ったら見る探す」というブックマークフォルダを作っています。 今回は、Webディレクターがさらっておいて絶対に損はないなと思ったお気に入りブックマークを、超私選ではありますがご紹介します。 01. DIGIDAY http://digiday.jp/ 特にこれ使えるー！って思った記事が2015年12月3日に公開された「日本の10代、もっとも好きな情報源は「Twitter」 〜そのスマホ行動を示す
参考にしたい！アニメーションの動きが気持ちいいスクリプト | Swwwim
最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。 制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。 メニュー mmenu DEMO SOURCE Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。 Off-Canvas Menu Effects DEMO SOURCE Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。 スクロール JQUERY FULL CONTENT DEMO SOURCE 縦、横にコンテンツをスクロールできるようになります。 MIDNIGH
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
おしゃれなセレクトボックス（ドロップダウンリスト）のCSS・javascriptサンプルまとめ | sounansa.net
おしゃれなセレクトボックス（ドロップダウンリスト）のCSS・javascriptサンプルまとめ 最終更新日: 2017/09/16 フォームのselectタグをそのまま利用するとデザインが味気ないですよね。でもフォームはCSSでデザインをいじるのに苦労することが多いのも事実であり、手間をかけてられない部分でもあります。 ここは手っ取り早く、他人が作ったおしゃれなセレクトボックス、ドロップダウンリストのデザインを参考にしてしまいましょう。 以下に紹介するセレクトボックス・ドロップダウンリストはすべてHTML、CSS、javascriptのソースが確認できます。 セレクトボックスをかっこよくすることでデザインの差別化を図ってみてはいかがでしょう。 ここで紹介するセレクトボックスは、すべてこのページ内でサンプルの動きを確認できるようにしています。 どうぞクリックしたり、マウスのhoverを確
37 Mobile App Navigation Examples
Design Your Way is a brand owned by SBC Design Net SRL Str. Caminului 30, Bl D3, Sc A Bucharest, Romania Registration number RO32743054 But you’ll also find us on Blvd. Ion Mihalache 15-17 at Mindspace Victoriei contact@designyourway.net You tap an icon and bam—you’re swept into another world. That’s the power packed in those few square inches of your smartphone, and a lot lies in the realm of mob
SINAP | 注目のプロトタイピングツールまとめ-アプリのUIデザイン
こんにちは。デザイナーの飯山です。 夏の暑さも都内では落ち着きすっかり秋めいてきました。9月のシルバーウィークの過ごし方に想像を膨らませる今日この頃です。 さて、今回は数多くあるプロトタイピングツールの中から注目の�ツールをまとめてご紹介したいと思います。「なぜ？」「なにそれ？」という方もいらっしゃるかもしれないので、シナップでのプロトタイピング活用事例について少し触れたいと思います。 SINAPではR&D活動に取り組んでいます。新しい技術や制作手法を用いてトライ&エラーを繰り返すR&D活動では、アジャイル型の開発で進めていることもあり各種プロトタイピングツールをその時の目的に応じて使用しています。 R＆D活動の近況はSINAP Journalでも掲載していて、SINAPのR&Dチームのひとつで取り組んでいるブラウザで読める電子書籍公開サービス『パン』β版にも掲載されてるのでご興味ある方は
30 GIF Examples of UI Mobile App Animations
This article is all about UI mobile app animations! Below is our list of 30 animated examples of UI mobile app animations that will surely inspire you to do the same next time you present your app concept to your client. The UX Designer Toolbox Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets Starting at only $16.50 per month! DOWNLOAD NOW
アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ - Qiita
業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
50 Beautiful Mobile UI Design with Amazing User Experience Graphic Design Junction
The actual fact of User Interface (UI) as well as User Experience (UX) is that both UI/UX are the two sides of the same coin. Both are keeping up the relationship between the users and their products. The User Interface (UI) describes the dealing with the as well as and the products, while another, the user experience (UX) is dealing with the user’s experience and the observation of the products.
20 stunning examples of minimal mobile UI design
Need help signing in? EMEA/USA: +44 (0)20 7970 4322 | email: subs.support@econsultancy.com Some of the best web and mobile app designs have a very limited colour range. Two or three colours can be more than enough, and I find that a restrained approach to colour works especially well on de-cluttered interfaces. The use of colour in design is a bit like great music, where balance, contrast, restrai
Creative UI Design Examples for Great UX
UX (User Experience) is all those elements and factors related to the user's interaction with a particular environment or device which generate a positive or negative perception of the product, brand or device. UX is subjective and focused on use. The standard definition of UX is "a person's perceptions and responses that result from the use or anticipated use of a product, system or service". The
30 Recent Inspirational UI Examples in Mobile Device Screens
In the increasing trend in web design towards perfecting the ideal user experience, interface design always plays a key role. Last week we published 10 major trends we took from our eBook "Web & Mobile Trends for 2013", among which content-first was the key idea. The interface, being relatively superficial, coud be the second most important to consider. And in the visual world in which we live, if
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Top 10 Mobile App UI of February 2016
Loading...
