魅力的なマテリアルデザインのコードスニペット10選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 マテリアルデザインがWebの世界で大流行しています。フレームワークやカスタムUIキットを使ったマテリアルスタイルの新しいサイトが毎月いくつも登場しています。 しかし、これは悪いことではありません。むしろその逆です。Googleが自ら好ましいデザイン言語であると認めた、お墨付きのトレンドを用いることによって、デザインプロセスを簡略化できるからです。 もしマテリアルデザインに関心があるのならば、これから紹介するコードスニペットはうってつけです。私のお気に入りの中から、10のスニペットを紹介していきます。 レスポンシブテーブル See the Pen Material Desig
任天堂『スプラトゥーン』UIデザインの舞台裏｜娯楽のUI 公式レポート #2 | キャリアハック（CAREER HACK）
世界中の人の心を掴んだ「スプラトゥーン」、文字や細かなパーツをみただけで「スプラトゥーン」とわかる作り込まれた世界観。そのUIデザインプロセスとは？ 「わかりやすさ」と「新鮮さ」の両立を目指して ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。 そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。 スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。 いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。UIデザインを担当した、橘 磨理子さんは「わかりやすさ」と「新
ダッシュボードで上手に情報を可視化するためのガイドライン
JustinはUsabilityGeekの創始者であり、使いやすい記憶に残るオンライン体験の創出において15年以上もの実績があります。 システムが完全なものになるにつれ、定性的なデータや定量的なデータもまたさまざまな頻度・複雑さでを取得できるようになります。このような状況では、情報の可視化がさらに重要になります。 端的に言うと、情報の可視化（information visualisation）とは、抽象的なデータをユーザーが理解できるように可視化し、さらにデータ間の関係性を理解できるようにすることです。 デザイナーの役割と情報の可視化 デザイナーの役割は、ユーザーにとってわかりやすい方法でデータを表現することです。これには、課題や制約、データを表現するために利用できるスクリーンサイズという制限が伴います。 もしデザイナーがユーザーが理解しやすいデータを作成できないと、ユーザーがデータを利用
モードレスデザイン｜ai
はじめて iMacG3 を使った時、私はとても前向きな気持ちになった。説明書を読まなくても何をどうすればいいの分かったし、自分の思い描いた通りに動かすことができた。 道具は使う人の能力を拡張させると言うけれど、私はあの丸いマウスと一緒に、文章を書いたり、絵を描いたり、本当に何でも出来る気がしたのだ。 それは Mac だけではなかった。iPhone も、iPadも、Apple 製品はいつも私を高揚させた。なぜ私はこんなにも惹かれるのか。不思議に思いながらも、私は Apple 製品を追いかけてきた。 どうして？ ... 実はその秘密は既に明らかになっている。 それは、モードレスだからだ。 直感的だとか、シンプルだとか、一貫性があるとか、そういったものは表出された一部にすぎない。 この秘密は、 今から 9 年も前にインターネットに公開されたテキストにあっさり書かれている。ソシオメディアの上野学
見落とされがちなアカウント概念のデザイン
わりかん・決済アプリ「paymo」を運営する AnyPay, Inc.のPM & UI/UX Designer。技術とデザインの力をプロダクトに結集させるプロセスがとても好き。Twitterは@ikutani41。 WebサービスやiOS/Androidアプリのデザインをするとき、どのようなアカウント概念を採用するか検討したことはあるでしょうか？ ほとんどのアプリは、ユーザーごとにアカウントを作って情報やログを紐づけたり、機密情報を扱う場合は認証機構を設けたりする必要があります。また、どのようなタイミングで、どのような操作でアカウントを作ってもらうかはとても重要で、さまざまな選択肢があります。 一般的なデザイン アプリをインストールして初めて開いたとき、下図のような画面をよく見るかと思います。 こういったデザインが採用される背景には、理由があります。 ユーザが慣れているため操作に迷いにくい
もう縦スクロールって疲れません？進化する私たちの指と視野｜ワカモノのトリセツ
こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション
限られた制作期間で効率的なUI作成を—「アイドルマスター シンデレラガールズ ビューイングレボリューション制作事例」（後編）【CEDEC 2017】
8月30日より9月1日までパシフィコ横浜で開催されたコンピュータエンタテインメントの技術者会議「CEDEC 2017」。ここでは9月1日に開催された「アイドルマスター シンデレラガールズ ビューイングレボリューション制作事例：理想的な開発環境とPhotoshopを駆使した効率的なUI（ユーザーインターフェイス）デザインの手法」をレポートする。 登壇者はCygamesのUIデザイナー（マネージャー）の矢吹星子氏（左）とテクニカルアーティスト（右）の諌山英世氏が担当。 「アイドルマスター シンデレラガールズ ビューイングレボリューション」（デレVR）のUIデザインは、PS4でも見劣りしないことを目指した。画面遷移は全部で30画面ほど。開発期間は2016年の6月にスタートしたので、製作期間は約2か月半。その短い期間内で滑らかで高画質なUIをストレスなく行うことが目標とされた。 制作作業中に避けた
ProtoPie: Interactive Prototyping Tool
#1 advanced prototyping tool for dynamic & multimodal interactions
UI談義のすすめ
https://dribbble.com/shots/1679085-Mobile-UI-Blueprint-freebie私の職場ではUIについてのマニアックな談義が行われることがあります。アプリやwebだとかのデザイン会社なので周囲にはUIやUXのプロフェッショナルが集まっていて、『UI談義』の文化が根付いています。 UIを解剖するためのUI談義UI談義とは、UIオタクで集まってUIのことをひたすら考察し合うだけの集まりです。ここには職種問わず誰でも参加が可能で、UIデザイナーはもちろん、iOSデベロッパー、Androidデベロッパー、PM、マネージャーなどなど、あらゆるタイプの人が集まります。 UI談義のテーマは突如設定されます。普段利用しているアプリのちょっとしたインタラクションが気になったらそこでUI談義が始まります。iOSのアップデートでApple純正アプリのUIが変わったタイ
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
『NieR:Automata』のUIデザイン | NieR:Automata 開発ブログ
こんにちは。『NieR:Automata』で UI (ユーザーインターフェイス) とメカデザインを担当した木嶋です。開発ブログを書くのは『ベヨネッタ2』以来になります。(以前書いた記事) 普段あまり注目されないUIですが、ありがたいことにユーザーの方々からの要望があり、当記事を執筆することになりました。UIにもヨコオさんのこだわりがたくさん詰まっているので、その一部も併せて紹介していこうと思います。 ■はじめに：UIアーティストの仕事 UIアーティストは、体力ゲージや会話ウインドウ、各種メニュー画面などゲーム内表示物を作っています。 大まかな仕事の流れはこんな感じです。 1：UIのコンセプトデザイン策定 2：仕様に合わせて各メニュー画面や表示物のデザインを量産 3：UIのゲームデータを作成してプログラマーに実装してもらう 4：動くUIを触ってみてアニメーションなどの調整、クオリティアップ
Webデザインにおけるスクローリングの新しいルール
かつてWebデザインでタブーとされていたものが、近年もっとも人気がある手法の１つとして完全復活しました。ユーザーはスクロールが必要なサイトを好み、評価するようになったのです。スクローリングは過去の汚名を捨て去り、主要なインタラクションデザインの要素として新たに生まれ変わろうとしています。つまり、デザイナーは新たなルールを学ぶ必要があるということです。 この記事では、スクローリングの復活について探ります。この手法の長所と短所を説明し、ちょっとしたヒントも紹介します。 スクローリングが再評価された理由 簡潔に言えば、答えはモバイルデバイスにあります。 モバイルユーザーの数がデスクトップユーザーの数を上回って以来、UIデザイナーの誰もがこの流れに適応してきました。小さな画面を利用するユーザーが多くなったことで、スクローリングの必要性が増しました。画面が小さくなるほど、スクロールは長くなります。
ユーザーインターフェイスにおける明示的アクション／暗黙的アクションの違いと設計の考え方 – usagimaru – Medium
明示的アクション／暗黙的アクションについてずっと言語化できていなかったので、このたび記事にまとめてみました。馴染みのあるMac OSそしてiOSを例に、画面上のオブジェクトを操作するための二つのパラダイムについて説明します。 2005年頃の Apple Human Interface Guidelines (HIG) を開いてみると、そこには「Explicit and Implied Actions – 明示的および暗黙的アクション」と呼ばれるデザイン原則が示されています。Mac OSのユーザーインターフェイスでは、明示的アクションと暗黙的アクション、この二種類の操作体系が同時に提示され、ユーザーは好きな方法を選択することができるようになっています。 明示的アクション明示的アクションとは、すなわち画面上に明示された手段を選択してコマンドを実行するというものです。Macを例にすると、ユーザー
GoodpatchのUIデザイナーがおすすめ UIデザインを理解するためのブックリスト【2021増補版】｜Goodpatch Blog グッドパッチブログ
今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザイ
デザイナーに届けたい…マテリアルデザイン事始め Part.2 - Qiita
今回はマテリアルデザインの主なコンポーネントについてです。 前回散々、UIパーツだの要素だの言ってきましたが、そいつらは実際どんなものがあるんだい？ってところを拾っていきます。 いつの日か「ここのUIってこんな感じもどうですかね？」「あー。確かにAndroidってこんな感じのUI多いよね。」「でしょー！」みたいな話ができるようになることを祈って、説明向け資料をまとめていきます。 Part.2 : マテリアルデザインのコンポーネント（小） 前回 Part.1 : マテリアルデザインの概観 次回 [Part.3 : マテリアルデザインのコンポーネント（中）] (http://qiita.com/kazu04r/items/20e16d31dd3292b8c98c) コンポーネントってなんなのさ？ 機器やソフトウェア、システムの構成する部品や要素のこと。 今回の場合は、マテリアルデザインを表現す
使いやすいフォームデザインのための新しい４つのルール
大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー
デザイナーに届けたい…マテリアルデザイン事始め Part.1 - Qiita
2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。 Part.1 : マテリアルデザインの概観 次回 Part.2 : マテリアルデザインのコンポーネント（小） マテリアルデザインってなんなのさ？ 物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。 基本の考え方 マテリアルデザインとは紙とインクの要素で出来ている オブジェクトの重なりを物質的に捉える（３次元） 意味のあるアニメーションでより直感的に 紙とインク 紙？ UIパーツは紙でできていると考える。 紙は以下の特徴
【デザイナー向け】これからAndroidのデザインをする人へ - Qiita
このナビゲーションバーがスマートフォンの場合は横画面にした場合は右側に配置されるのですが、タブレットは下側に表示されます。 さらに、ソフトウェアキーボードではなくハードウェアキー(通常 静電方式のタッチ)の場合があります。これにより、端末によってレイアウトが変わるのでデザインをする上では注意が必要です。 smart phone tablet 端末サイズ一覧 海外端末が多いですがGoogleのMaterial.ioのページを見ると、dpとpxが記された端末のサイズ一覧を見ることが可能です。 https://material.io/devices/ こちらのページにある端末がAndroidのデファクトスタンダードになりますので、本当はこちらに合わせるのがベストですが、日本だと独自にカスタマイズされた端末達と戦う事になります… お互い頑張りましょう💪🏼 iOSとの違い 戻るという概念 戻るボ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」 - かちびと.net
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
