Galileo AI
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
UI Crunch #13 娯楽のUI - by Nintendo - - YouTube
2018/4/27（金）に渋谷・DeNAオフィスで開催した『UI Crunch #13 娯楽のUI - by Nintendo -』。"もっと楽しく"を追求する、任天堂のUIデザイナー3名をお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきました。 https://ui-crunch.connpass.com/event/82969/ ■■■■コンテンツ■■■■ 00:00:00～ 自己紹介・もくじ 00:03:57～ ①あそび心とUI 00:23:02～ ②SplatoonUIの狙い 00:42:22～ 任天堂の紹介 00:46:14～ ③NintendoみまもりSwitch は 誰のもの？ 01:07:07～ さいごに 01:10:51～ Q&A 【UI Crunchとは】 UI Crunchは、DeN
マリオメーカーのUI/UXデザイナーが語る「弱点を克服する娯楽UI」の原点とは | 超ゲームウォーカー!
2018年4月27日（金）、東京は渋谷ヒカリエ11Fにて、UIデザインをテーマとした勉強会「UI Crunch」が開催された。2014年に開催された第1回目の開催から本年で4年目、通算13回目となるUI Crunchだが、今回はいつも以上に開催前から話題が絶えなかった。それもそのはず、普段なら多い時でも参加枠に対する応募倍率は3〜5倍程度なのに対して、今回はなんと、まさかの30倍超え。 その理由は明白だ。マリオやゼルダなどの歴史あるゲームシリーズを手がけ、近年ではスプラトゥーンやARMSといった新規IPの開発にも余念がない、我らが日本の世界的ゲームメーカー「任天堂」のUIデザイナーが登壇するからだろう。 普段からあまり対外的な発表やコミュニケーションが控えめな印象である任天堂の社員が、珍しく、それもUIデザインという文脈でイベントに登壇するというのは、過去にあまり例がない。 今回登壇したの
娯楽を超えたデザイン （UI Crunch #13 娯楽のUI イベントレポート）｜のっち Ryosuke Inoue
「UI Crunch #13 娯楽のUI - by Nintendo -」に参加しました。世界的にも注目される企業かつあまり表に出てこないデザイントークが聞けると言うことで、倍率も相当なものとなっておりました。この企画は構想から2年くらいかかったそうで、とても濃いお話を聞くことができました。めちゃ感動しました。今回は、そちらのイベントレポートです。最初の方あまり写真を撮らなかったので、後半の写真が多めになります。 1人目は、UI/UX デザイン チーフの正木さん。「娯楽UIの思考の原点」についてお話いただきました。 Nintendo流の「伝え方」Nintendoが人に何かを「伝える」時にこだわっていること。それは、以下の3つです。 ・「教える」ことよりも「体験する」ことで、より早く、的確に伝えることができる。 ・初めての体験は一度きり。新鮮な印象を大切にする。 ・体験はやっぱり面白くしよう
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか？ 閑歳： 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか？ 閑歳： 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。 データ
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
最近のUIデザインで使われている同一色相のグラデーションなど、人気のあるカラーのまとめ | コリス
落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 PhotoshopやIllustrator用のスウォッチもダウンロードできますよ。
男性の20人に1人が色覚障害。対応が遅れる「麻雀の赤色」問題 - エキレビ！(1/2)
男性のほうが発生しやすく、日本では20人に1人の男性が色覚障害を持っているといわれている。 色覚障害は「わかりにくい」障害だ（本人もわかっていないケースも多い）。そのため、色覚障害者向けのサポートや対応は遅れている。2014年の1月に「パズル＆ドラゴンズ」がドロップの色味を変更した「色覚サポート機能」を実装したことは大きな話題になったが、それだけ色覚障害者への対応例がまだまだ少ないことを表している。 多くの人が遊んでいるゲームで、色覚サポートがほとんどされていないものがある。それは「麻雀」。 色覚障害には「P型」と「D型」の2パターンがあるが、そのどちらのパターンにおいても「赤」は見えにくい。明度が低く、目立たない色に見えるのだ。 ところが、麻雀には「赤色」が多く使われている。 ゲーム進行に欠かせない情報（親ランプ、積み棒ランプ、点数表示ランプなど）の表示の赤いランプ、近年普及した点数アッ
How Do Fictional UIs Influence Today’s Motion Controls?
The Leap Motion Controller doesn’t exist in a vacuum. Across fiction, gaming, and art, we can see a rich history of motion control concepts and devices, and understanding what makes them successful is hugely important to building the next generation of real-world interfaces. How do fictional user interfaces influence #VR motion-controlled interactive design? Click To TweetIn this two-part video, w
スマートフォントUI+オープンソース
スマートフォントUI+は商用可のかっこいいフリーフォント フリーフォントのスマートフォントUI+は、無料ダウンロードでき商用可能なおしゃれでかっこいい日本語書体。このフリーフォントは第二水準の漢字も含まれ、エクセル、ワード、Adobeイラストレーター等のアプリケーションで自由に加工して使えるゴシック体です。ひらがな、カタカナ、アルファベット、数字の字体をオリジナルで制作し、漢字をIPAexゴシックを改良したフォントで補完しています。 フォントのデザイン特徴について スマートなデザインを実現するために約90%のコンデンスド（長体、つまり縦長）になっています。グリッド（方眼）を意識したシステマチックなデザインで横組み、縦組みでのスッキリとしたモダンな表現を可能にします。また漢字に対して仮名文字がこぶりなフォントデザインになっているのも特徴です。モダンゴシック体（新ゴ[モリサワ]、ロダン[フォン
Macに慣れたらWindowsのフォントが耐えられないので解決してみた｜Mac - 週刊アスキー
Windowsユーザーだった女子編集者が、実際にMacを使うなかで出合ったトラブルを解決する本連載。Macを使う時間が長いと、久々にWindowsを起動したときにフォントのギザギザ感に驚くことがありますよね。Windows歴がだいぶ長かったのに、いまやキレイなMacの文字表示にすっかり慣れてしまいました。Windowsでもフォントをなめらかに表示する方法をご紹介します。（ちなみに私、まだ7です……） 同じGoogle Chromeの画面でも、こんなに差が！ Windows Vistaからは、システムフォントに「メイリオ」が搭載されたおかげで、システム関連UIは見やすくなりました。ですが、ウェブブラウザー上やテキストエディター、Wordなどの文字にはジャギー（ギザギザ感）があります。これを解決するため、フォントのアンチエイリアス処理をカスタマイズできるフリーソフト「MacType」を試してみ
どうしてマウスカーソルの矢印は、斜め45度を向いているの？
疑問にすら思ったことなかったかも…。 マウスカーソルの矢印はなぜ、上向きではなく斜め45度に傾いているのか。当たり前すぎてそもそもカーソルのアングルについて疑問をもったことのある人も少ないのではないでしょうか？ このデザインに特に理由なんてなさそうに見えますが、画素が粗かった時代ならではのちゃんとした理由があったそうです。 この質問に対しQ&Aサイト｢Stack Exchange｣では、ソフトウェア開発者のバート・ジッセンズ（Bart Gijssens）さんが、なぜカーソルが傾くようになったのか、その成り立ちを解説していました。 歴史的にはこういうことのようです。 （コンセプト画像は以下のドキュメントから拝借。） マウスとマウスカーソルを発明したのは、ダグラス・エンゲルバート（Douglas Englebart）さん。カーソルの矢印は元々、まっすぐに上を向いていました。 しかしPARC（ゼ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイスのデザインのヒント - Apple Developer
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
UX/UIデザイン - OHAKO | 企画～実装をご支援
cakes（ケイクス）
