Francfrancのデザインシステムは、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確にかつ迅速に行うためのものです。
Francfrancのデザインシステムは、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確にかつ迅速に行うためのものです。
We received a lot of attention for our Data Looks Better Naked post. People got bored on Christmas Eve and some interesting searches for Star Trek somehow landed them on our page. Now their charts look better. The principles outlined in that article aren't just for charts, though. You can apply them to your data tables with similar improvements in readability and aesthetics. To paraphrase Edward T
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV(アベマ TV)で使われています。 (Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより) Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms(原子)・Molecules(分子)・Organisms(有機体)・Templates(テンプレート)・Pages(ページ)です。 各コンポーネントの詳細は次のとおりです。
Web サイトやアプリのデザインにおいて、再利用可能な部品(UI)をカタログしたスタイルガイドが必要とされています。公開されてから次のリニューアルまでデザインが変わらないという状況はまれですし、即座に対応しなければならない場合もあります。制作時は想定されていなかった要素も出てくるでしょうし、対応できる技術が変われば、コードから見直しも考えられます。変わり続けるのはコンテンツだけででなく、デザインにも同様のことが言えるわけです。 Web サイトやアプリといったデジタルプロダクトだけでなく、紙媒体やソーシャルメディアなどあらゆる場でデザインの一貫性が求められています。そうした場合、フロントエンド寄りのスタイルガイドだけでは不十分で、ロゴ規約や書体の扱い方などデザインに関わる様々な素材・ツールを揃えた何かが必要です。デザインSDKのようなもの。特定のデザイナーに知識やスキルを集約させない、拡張性
少々前の話になりますが、ポリゴン・ピクチュアズさまからお声掛けいただき、2014~2015年にかけてテレビ放送されたアニメ「シドニアの騎士」(原作: 弐瓶勉さん)のプライマリーデザインを弊社 三階ラボ で担当させていただきました。 プライマリーデザインの具体的な内容は以下の2つです。 モニターグラフィックメインビジュアルの開発 シドニアフォントの作成 ともに、原作の漫画にはすでにオリジナルのデザインが存在していますが、しっかりと時間をかけて目視できる静止画とは違い、アニメのような動画では、様々な要素が一瞬しか表示されないことが多くなります。 今回は、原作の素敵なテイストを維持しつつ、アニメ向けにデザインを再構築することが主な目標でした。 モニターグラフィックメインビジュアルの開発 原作の漫画から、モニター内に表示される主なグラフィックを抽出し、機能性や視認性、汎用性を高める再デザインを行い
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown pr
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
はじめに 多様化する環境 iPhone6とiPhone6 plus、iPad proの登場によりiOSデバイスの画面サイズが一気に増えました。 次は4インチのiPhoneが追加されるという噂もあります。 Androidではそれ以上に多様な解像度の端末が発売され今後も増えていくことが予想されます。 Windowsタブレットの小型化も見逃せません。 さらに今後はTVやタブレット、カーナビなど様々なデバイスがWebにアクセスしてくるようになります。 以前のように特定の画面サイズをターゲットにしてWebサイトのデザインを行うのは難しくなっています。 現在ではあらゆる解像度や画面サイズで最適なWebデザインを行う必要があります。 最適とは 最適というのは、小さな端末でも見やすく、大きな端末では、大きさを活かしてもっと見やすく表示できることを言います。 より大きなスマートフォンを持っている人はより多く
はじめまして、ドワンゴでデザイナーをしているぬるぴょです。普段は主にニコニコ静画に関わるデザインを担当しています。 今回、私がデザインを担当したニコニコ漫画というアプリがリリースされましたので、このアプリの制作についてご紹介します。アプリにはiOS版とAndroid版があるのですが、私が主に担当したのはAndroidなので、Android版を制作する上で目指したUIとその制作工程を中心にお話します。 ニコニコ漫画とは? まずは簡単にニコニコ漫画の紹介をさせてください。 ニコニコ漫画とは、ニコニコ静画(漫画)に投稿された作品をスマホで見られるアプリです。ユーザーが投稿したオリジナルのWEB漫画はもちろん、人気漫画雑誌連載の作品も無料で読むことができます。 独自のマンガ体験 ニコニコ漫画の特徴はこの独自のマンガ体験! マンガを読むスタイルは2つ用意していて、マンガを縦にスクロールして読む形式と
スマートフォンの普及で、PCで閲覧するWebサイト(以下、PCサイト)に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
「魔法少女まどか☆マギカ」© Magica Quartet/Aniplex・Madoka Partners・MBS 「〈物語〉シリーズ」© 西尾維新/講談社・アニプレックス・シャフト 「ぱにぽにだっしゅ!」© 氷川へきる/スクウェアエニックス・ぱにぽに製作委員会 「キノの旅 -the Beautiful World-」© 時雨沢恵一/アスキー・メディアワークス/「キノの旅」製作委員会 「十二戦支 爆烈エトレンジャー」© I&S 「メカクシティアクターズ」© じん/1st PLACE・メカクシ団アニメ製作部 「ニセコイ」© 古味直志/集英社・アニプレックス・シャフト・MBS 「電波女と青春男」© 入間人間/アスキー・メディアワークス/『電波女と青春男』製作委員会 「ef-a tale of memories.」© minori/「ef」製作委員会 「まりあ†ほりっく」© 2009 遠藤海成・
About : Elect-LO-nica Compilation 言わずと知れた『COMIC LO』(茜新社)の人気漫画家でありQuasar名義での音楽活動でも活躍中の東山翔氏。そしてwebを媒介に無料で音楽を配信するネットレーベルのひとつ「分解系レコーズ」の主宰およびニコニコ動画でのマニアックな活動などで知られるGo-qualia氏との異色のコラボによるロリータ専門雑誌「COMIC LO」のインスパイアコンピレーション『Elect-LO-nica Compilation』ついに解禁。 「少女とエレクトロニカ」をテーマに個性溢れるアーティスト達が各々の思い描く「Elect-LO-nica」を奏でる。 ほんの思いつきによる冗談めいたツイートがいつしか本格的なプロジェクトに発展してあげくは公式公認?にまでなってしまったというまさにtwitterならではのエピソードはさておき、ジャンルやシーン
コマンドラインツールについて語るときに僕の語ること - YAPC::Asia Tokyo 2014 コマンドラインツールが好きで昔からつくってきた. 今年のYAPCで,そのコマンドラインツールをつくるときにどういうことを意識して作っているのか?どのような流れで開発しているのか?といったことを語る機会をもらえた. 具体的な内容については,是非トークを聴きに来てもらうとして, スライドをつくるにあったって過去に読んだ資料や,よく参考にしている記事を集め直したので,その一部を参考資料としてまとめておく. UNIXという考え方 UNIXという考え方 Mike GancarzによるUNIXの思想や哲学をまとめた本.古いが全然色あせてない. コマンドラインツールの作り方を書いた本ではないが,これらの思想の上で動くツールはこの思想に準拠して作られるべきだと思う.何度も読んで考え方を染み付かせた. 小さい
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く