WebデザイナーがフォローすべきTumblrアカウント10選 | UX MILK
TumblrでWebデザイナーがフォローすべきアカウントを10個厳選してご紹介します。 Tumblrは画像や動画、文章など、様々なメディア形態で投稿できることから、グラフィックだけに留まらず様々な方法でデザインのインスピレーションを得ることができます。英語・日本語アカウントを織り交ぜて取り上げていますので気になるアカウントはぜひフォローしてみてください。※括弧内にアカウント名を表示しています。 １. All The Style Guides（allthestyleguides） 様々なサイトのスタイルガイドとパターンライブラリを紹介している、非常に勉強になるアカウントです。どうしても自分が知っているスタイルガイドばかりを参考にしてしまいがちですが、こうやってまとめてあると新たなスタイルガイド、パターンライブラリに出会うことができてとてもありがたいですね。 ２. House of Butto
これからReactを勉強する人が最初に見るべきスライド７選
React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。 そこで今回は、 「Reactって最近よく聞くけど一体何？」 「jQueryと何が違うの？」 といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。 ＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？ なぜ人は必死でjQueryを捨てようとしているのか なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
dribbbleのぬるぬる動くメニューUIのアイデア10選
アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい
商用可な明朝体の日本語フリーフォント10選
この記事では、商用利用ができる日本語の明朝フォントフリーフォントを10個厳選して紹介します。様々な場面であなたのデザインのサポートをしてくれる便利なフォントばかりです。 １. うつくし明朝フォント 流れるような字体の美しいフォントです。ひらがな、カタカナがオリジナルのもので、漢字はIPAex明朝フォントを使用しています。軽やか・滑らかな印象が作りやすいフォントです。 ２. IPAex 明朝フォント IPA（独立行政法人 情報処理推進機構）が配布しているフォントです。文章中のひらがな・カタカナ・漢字は固定幅に、アルファベットは変動幅で表示されるようになっており、このフォント１つで整った日本語の文章を表現することができます。 ３. はんなり明朝 「り」の文字が特徴的なフォントです。こちらは、ひらがな、カタカナのみのフォントで、漢字・記号・英数字はIPA明朝フォントを使用しています。やわらかい雰
直感的なラピッドプロトタイピングツールMockplusを使ってみた
UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 プロトタイピングはWebやアプリのデザイナーの間ではもはや無視できない工程となってきており、最近ではAdobeなどの参戦も騒がれたように、世界中で多くのツールが日々生まれています。 プロトタイピングと一言で言っても様々な開発段階や目的によって細かい用途や使用感は変わってきます。多くのツールの中でもどれが優れている、というよりも自分の用途にマッチングして、使いやすいものを選ぶのが大事です。 ということで、今回は国内ではまだあまり紹介されていないMockplusというツールをご紹介します。 Mockplusとは MockplusはJongde Softwareが提供するラピッドプロトタイ
スーパーマリオのステージ1-1から学べるUX
上海で働くさすらいのゲームデザイナー/ディレクター。日本語、中国語、英語、名古屋弁のマルチリンガルということになっている。 ファミコンの初代スーパーマリオブラザーズには優れたUXを作りあげるためのヒントがたくさんあります。 今回の記事では、スーパーマリオの１－１に散りばめられた「ユーザーに新しいことを自然に覚えてもらう工夫」を紹介します。 新規コンテンツの「色々覚えるのめんどくさい問題」 新しいコンテンツでは、ユーザーにいかに使い方や遊び方を理解してもらうかが非常に大きな課題です。 クリエイターは「新しくて誰も見たことがないものを作りたい！」と思うものですが、ユーザーにとってみればコンテンツを初めて利用するときの面倒くささがその斬新さに比例して大きくなっていきます。最初の「覚える」段階のUXが悪ければ、その先にどれだけステキな体験が待っていたとしても、そこに到達する前に多くのユーザーは離脱
読み間違えると恥ずかしい！デザイン・プログラミング用語15選 | UX MILK
ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「
感情を揺さぶるWebサイトをデザインする方法
AlanはIT分野で非常に多くの経験を持つ熱心な技術ブロガーです。現在はカリフォルニアのロサンゼルスにあるウェブサイトのデザイン、開発、インターネットマーケティングを手掛けるSPINX Digital Agencyで仕事をしています。 私たち人間は、自分たちが論理に従って選択をする理性的な人間だと思っています。しかし実際は非常に感情的な生き物です。理性的だと考えようとすればするほど、感情は決断により大きな影響を与えます。 WebデザイナーはWebサイトがどのような感情を引き起こすものかを考慮に入れなければなりません。あなたの意図することを伝えるだけでは十分ではないのです。感情的な反応を引き出せないWebサイトはすぐに忘れられてしまいます。Webサイトをデザインするときには、人の感情を考慮する必要があります。 感情とWebデザイン Donald Normanは『Emotional Desig
UI Crunch #8 参加レポート
コーポレートサイトのWebマスター、ECサイトの店長、ECパッケージベンダーのディレクターなどを経て、現職へ。IAに基づくWebエンジニアリングを追求する毎日を送っています。海外ドラマ鑑賞、NBA観戦、ゲーム好き。 DeNAさんとGoodpatchさんが共催するセミナー「UI Crunch#8」に参加してきました。 毎回応募者が殺到し、倍率が何倍にもなる人気セミナーですが、今回もご多分に漏れず、120人枠に733人もの申し込みがあり、当選確率が6倍にもなっていました。 今回私はUX MILKの突撃レポーターとして参加させてもらうことができましたので、メディア席の最前列よりイベントの様子をレポートさせていただきたいと思います。 プレゼンテーション 株式会社サイバーエージェント｜佐藤洋介さん テクニカルクリエイターが担う、サービス開発のUIモックの現場 〜サイバーエージェント流〜 サイバーエー
背景デザインに使える幾何学模様の無料テクスチャ素材まとめ
使い方によって、近未来風、レトロ風など様々なシーンに応用できる幾何学模様。フラットデザインが流行している近年は特によく見かけますよね。 今回は、そのまま壁紙や背景に使えるハイクオリティな幾何学模様テクスチャ素材を集めました。テクスチャ素材を使えばデザインの幅も広がりますし、時間短縮もできるので、ぜひ参考にしてみてください。 Polygon free vector backgrounds ６種類のポリゴンスタイルのベクター素材が入ったセット。近未来っぽい雰囲気を演出できそうです。 GEOMETRIC PATTERNS 様々な幾何学模様のパターンが収録されたセット。色も模様も全くことなるパターンが入っているので、いろいろ試してみると楽しそうです。 Geometrical Pattern Collection モノクロの幾何学模様パターンのセット。無機質でかっこいいイメージに合いそうです。 5
古典絵画から学ぶデザイン
デザインという言葉は今日では一般的ですが、デザインという言葉がなかったような過去の古典美術の世界でもデザインの概念はありました。絵画というと、デザインというよりファインアートの印象が強いですが、過去の画家たちから学ぶことも多くあります。そこで、今回は古典絵画から学ぶデザインについて説明します。 絵の情報量 モチーフの置き方で変化するもの こちらに2枚の絵があります。 Aは木の隣に猫がいます。Bは木の後ろに猫が配置されています。どちらも同じ要素で描かれていますが、違いは何かわかるでしょうか。 答えは「情報量」です。 Aの場合、木と猫が並んではいるものの、3次元で考えたときに「どちらが前にあるのか」や「どちらが後ろにあるのか」がわかりません。わからない、ということは観るほうにとって情報が与えられてない、ということです。 一方、Bは確実に「木が前で猫が後ろにいる」という情報を観る人に与えます。つ
Web・アプリデザイナーがチェックしておくべき企業ブログ10選
Webやアプリに携わるデザイナーにおすすめの企業ブログを厳選しました。各社が提供しているサービスの事例や、ノウハウ、最新トレンドなどあらゆる情報が公開されているので、ぜひチェックしてみてはいかかでしょうか。 dwango creators’ blog http://creator.dwango.co.jp/ 株式会社ドワンゴのデザイナーが運営している、2015年11月にできたばかりのブログです。ニコニコのサービスに関連した記事や、現場で活躍しているデザイナーが実践している便利なTipsが紹介されています。 1pixel http://ameblo.jp/ca-1pixel/ 株式会社サイバーエージェントが運営しているクリエイターズブログです。サイバーエージェントのゲームやWebサービスで使用されている技術や、話題の音楽配信アプリ「AWA」の開発秘話などが掲載されています。 DeNA Cre
ゴシック体で汎用性の高い日本語フリーフォント10選【商用利用可】
日本語のフォントはとにかく漢字が多いので、英語のフォントに比べると無料のフォントの種類が限られます。デザイナーであれば、日本語のフォントは有料で購入している人も多いかと思いますが、スポットで使いたい場合など、なかなか手を出しづらいのが現状です。 そこで今回は汎用性の高いゴシック体の日本語のフリーフォントを集めてみました。 ※細かな規約はサイトごとで異なるのでダウンロードするときはよく確認しましょう。 ※4/9 0:00 10選といいながら９つしかなかったので１つ追加しました Mgen+ (ムゲンプラス) 「Mgen+ (ムゲンプラス) 」は、フリーフォントである「M+ OUTLINE FONTS」をベースに、含まれていない漢字・記号をAdobeとGoogleが共同開発した「源ノ角ゴシック(Source Han Sans/Noto Sans CJKの日本語部分）」で補い、さらに豊富な漢字や記
新社会人が絶対押さえておくべきWebマーケティング略語15選
Web業界で働き始めた際に、多くの人がぶつかるのが「略語の壁」です。 コミュニケーションを効率化させるため、マーケティングの現場では多くの略語が使用されています。しかしその多くは普段耳にしない言葉なので意味が理解できず、戸惑ってしまう人も多いようです。 そこで今回はWebマーケティング業界で頻繁に使用される略語をまとめてみました。 Webマーケティング業界の略語まとめ CV （Conversion） Webマーケティング分野におけるCV とは、こちらであらかじめ定めていた成果目標（例えば資料請求や注文など）にユーザーが至ることです。カタカナでコンバージョンと表記する場合もあります。広告の費用対効果を考えるにあたり、最も重要な指標になります。 PV（Page View） Webサイトが閲覧された回数をPV（ページビュー）といいます。ウェブサイトがどのくらい閲覧されているかを測る最も一般的な指
2016年トレンドの水彩風デザインを楽しめる無料イラスト素材10選
2016年になって、手書き風や水彩画風のデザインが多くなってきました。今回は、無料で様々な用途に使える水彩イラスト素材をご紹介します。 優しい雰囲気や温かみを与えてくれる水彩イラストをデザインに取り入れてみてはどうでしょうか？ Watercolor dots 水彩絵の具で描かれた16種類のドットが素敵なベクターセットです。どれも繊細な色合いで、カラフルながらも落ち着いたデザインに向いています。 Free Watercolor Flowers Clip Art For Subscribers 美しいお花のイラストセットです。サイト内でメールアドレスを入力し、サインアップすればpngファイルでダウンロードすることができます。 個人利用のみ可能です。 Watercolor hispter badges 水彩絵の具の上に様々な形のバッジを乗せたベクターセット。アウトドア系のデザインに合いそうですね
Adobe初のUXデザインツール「Adobe XD」を使ってみた
この春から六本木で働き始める駆け出しデザイナーです！ MAMORIOという落とし物追跡タグのUI/UXデザインをやっています。 先日、ついに「Adobe Experience Design CC (Preview)」（以下、Adobe XD）が公開されました。 以前からAdobe初の”UXデザイン”に特化したアプリケーションとして話題になっていた「Adobe XD」ですが、一体何ができるのでしょうか？ 実際に使ってみながらご紹介します。 デザインとプロトタイピングの行き来ができる デザインソフト「Sketch」や、プロトタイピングツール「POP」「Prott」など、UXデザインをするためのツールはたくさんあります。「Adobe XD」の一番の特徴は、「Sketch」などが行っていた”デザイン”のプロセスと、それに遷移をつけて動くモックアップにする”プロトタイピング”のプロセスを、１つのアプ
これだけは押さえておきたいアプリのUXを改善する10の方法
アプリエンジニア。株式会社マイナースタジオ所属。主に扱っているプログラミング言語はSwift、Ruby、PHP、Python。イカが好き。 ユーザーにストレスなくより良いユーザー体験を提供するためには、細部のUIデザインにも気をつけなければいけません。 今回はこれだけは押さえておきたいUIデザインを紹介します。 1. エラー時は問題の解決方法も載せる たとえば、ネットワークエラー時などには「ネットワークに接続できませんでした」と表示するだけでなく、「ネットワークに接続できませんでした。Wi-fiの設定を確認のうえ、もう一度お試しください」というようにエラーの解決につながる方法を明示した方がより親切です。 2. 画面をスワイプで戻れるようにする iPhone6, iPhone6 Plusがリリースされ、最近では大画面のデバイスが増えてきました。片手操作の場合、画面上部にあるボタンに届かないと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページの表現を広げてくれる日本語のWebフォント10選 | UX MILK
モバイルアプリのUIデザインの参考になるスライド10選
