スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1｜Takumi Hasegawa (unshift)
基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じることはないのかなと、疑問に思いました。 結局はデザイナーさんと実装者との間で、あらゆる画面サイズにどのように対応するかのルールがしっかり共有できればいいですが、口頭や文字だけだったりすると、なかなかわかりにくかったりするものです。 なので、デザインデータに入れてもらったほうが、実機に近い形での見え方がイメージできるのでデザイナーさんもエンジニアも幸せになれるのでは、と思いました。 スマートフォンの画面サイズはさまざまですが、基本的にはiPhoneを基準につくるデザイナーさんが多いかと思うので、少なくとも多くのユーザを占めるiPhoneの見え方は担保できるかな、という感じです。 まぁそんなデザイナーさんの手助けになればと思いま
良いバナーの再現性を高めよう！デザイナーによるバナー運用例のご紹介
IQONアプリではネイティブ広告としてバナーを配信しており、大手ECサイトやファッションブランドが主なクライアントです。IQONのファッションコンテンツ内に表示されても違和感なく、かつCTRを最大化できるよう、そのほとんどを社内デザイナーが制作しています。 今回は、CTRを高めるためにVASILYデザイナーが行っている、「良いバナーの再現性を高めるバナー制作の取り組み」をご紹介したいと思います。 ナレッジが貯まらない、という問題CTRの出やすい訴求内容やレイアウトはある気がするものの、長らく個々人の経験則基準になっていました。とういうのも、バナー担当デザイナーがいるわけではなく、案件発生時に担当者を割り振っており、自分でつくったバナーが何となく良かったか悪かったかしか把握していないことが多かったからです。 つまり、CTRの出やすい傾向はありそうだが、それがチームのナレッジとして蓄積されてお
新人UIデザイナーが陥りやすい？制作時に気をつけたいポイント
iOSアプリのUIデザインの担当になって半年、IQONの改修や新規アプリ制作の中で陥ったポイントがいくつかありました。 今回は、新人デザイナーがアプリのUIを制作する時に気をつけたいポイントをご紹介します。 UIのパーツのルールを決める「これ、ボタンじゃないけどタップできそう…」とフィードバックを貰ったことはありませんか？ このままのデザインではユーザーが期待した動きをしない、分かりづらいUIになってしまいます。 これを避けるために、アプリ内で使うUIパーツの形や色などのルールを最初に決めておきましょう。 そして、UIパーツを似たデザインにしないことが重要です。 こちらのNG例では、投稿ボタンと見出しの形がほぼ一緒です。 ふたつとも目立たせたい要素ですが、見出しもタップできそうに見えます。 IQONでのユーザーにとって重要なボタン（投稿や設定の保存など）は、基本的に以下のルールです。 ・角
Reduxの設計で気をつけるところ - なっく日報
※ Presentational and Container Components - なっく日報 に補足を書きました。 概要 http://rackt.github.io/redux/docs/basics/UsageWithReact.html medium.com らへんに書いてある「Smart Components」「Dumb Components」を理解したよというお話です。 ポイント 以下、個人的な解釈です（ツッコミどころあればどうぞ！） VとCを切り離す ReduxとかFlux系ライブラリへの依存を切り離す あたりがポイントかなと。 VとCを切り離す Reactコンポーネントは 気をつけないと、MVCでいうところのVとCを兼ねた作りになりがち（Fluxアーキテクチャを採ったとしても！） 以下のように別々にわけるとより良い作りになる コントローラ的なコンポーネント（Smart
The 15 Best Material Design Frameworks and Libraries
Material design was developed by Google, with the basic idea to create a unified style for all of the company's web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows. You can read about the guidelines in full detail here. Although Google's design language is seen mainly in native Android apps, it's still a
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
The Circular Design Guide
The scale of what we’re designing has shifted from products, to companies, to economic systems. Who we’re designing for has expanded from a solitary user to an intimately connected web of people, spanning the globe. New tools such as artificial intelligence, the internet of things, and biomimicry mean our design ambitions are limited only by our imagination. Meanwhile, creativity has never been mo
Houdini、それはCSSの進化を促すプロジェクト - The future starts today
この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは
Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
Origami Studio — Origami Studio 3
Introducing Canvas. A new way to visually layout your Origami prototypes with freeform drawing tools, text editing, and visual components. Easily edit dynamic layouts. Changes automatically respond, making it faster to iterate on your work. See how Build interactive components. Visually layout your components in the Canvas and combine with powerful interactions in the Patch Editor. See how
PHOTO METI PROJECT
ようこそ、まだ見ぬ日本の美しさへ あなたが知っている日本は、この国のほんの一部でしかありません。 日本には47の都道府県があり、そこには四季を映し出す豊かな自然と、 長い歴史を誇る建造物、各地で育まれた個性的な文化が広がっています。 まだ見ぬ日本の美しさを届けるため、FIND/47は生まれました。 © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution4.0 International license. © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this
既存アプリのUIデザインを紐解こう〜ポケモンGO編〜
リリースされてそろそろ1ヶ月が経ちますが、皆様ポケモンGO楽しんでいますか？ いっときの盛り上がりは落ち着いてきてもう飽きたと言う方もいると思いますが、普段あまりゲームをしない私はなんとかレベル17まで上げて懲りずに頑張っています。 楽しむ中で、やはりデザイナーとしてはUIは気になるものです。 世界中で社会現象を起こすほどに素晴らしいアプリのUIはどうなのか、誠に勝手ながらポケモンGOアプリのUIデザインについて、「ポケモンGOのここがすごい！、ここが惜しい！」をそれぞれあげて、紐解いてみたいと思います。 ※この記事ではゲーム自体の体験については言及しないこととします。 ここがすごいよポケモンGOポケモンGOはすっきりおしゃれなゲームアプリ！一般的にゲームアプリというと、過度な装飾が施されたボタンがひしめき合い、グラデーションやドロップシャドウを多用しているため、ごちゃごちゃしている印象が
アイコン制作に役立つおすすめサイト4選
「アイコン」は、UI設計において最も大切な要素のひとつです。 弊社のサービス「iQON」でも、投稿や検索、お知らせなどの機能や、コンテンツの意味を伝えるメニュー部分で複数のアイコンを利用しています。 ホーム、アイテムをさがす、コーデをさがす、店舗をさがす、などなど…。iQONには豊富なコンテンツがあるため、各アイコンですみ分けできるよう工夫しています。新しい機能やコンテンツが追加されるとき、どんな風にアイコンで表現するかは、かなり頭を悩ませる作業になります。このアイコンで意味は伝わるか。伝わるがサービスの世界観と合っているか。などなど… ミニマムに、でも確実にユーザーへ伝えないといけないため、かなり難易度の高いデザインと言えます。 今回は、そんなアイコン制作に役立つサイトを4つピックアップしてみました。 http://iconmonstr.com/ 3,000以上のアイコンを検索・ダウンロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアのためのスライドデザイン実践講座 / How to design presentations for engineers
Introducing Auto-Layout for Sketch
UIkit
Office Snapshots
UXPin | The Full-Stack UX Design Platform
Wordmark
