文字サイズの比率と調和
ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ... // 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz
Optical effects in user interfaces
Our eyes are weird and often mislead us. But if you know the peculiarities of human vision, you can create better designs. Not only do type designers utilize optical tricks for creating readable and well-balanced fonts, but it’s also helpful for designers who craft user-computer interaction. In the 1920s, the Gestalt theory of visual perception appeared. It explains how the eyes process informatio
デザイナー向けデザインレビューの仕方｜MAY
※ 本ノートは社内向けに作成したドキュメントをベースにしております。文中には指示語や断定的な表現が多く含まれますが、その点ご理解とご了承ください。以下のレビューの方法が少しでも皆様のお役に立てれば光栄です。 はじめに ここでのデザインレビューとは、デザイナーが作成したデザインカンプを、上司やチームに確認してもらう機会のことを指します。 この時点では仕様書、設計書などはFIXして進めている事が前提となり、デザインレビュー段階での仕様などの指摘、変更は奨励しません。（※） また、仮にデザインレビューの段階で仕様書、設計書に不備が発生した場合は、レビューを一旦止め、そこの見直しをした後、再び正しい仕様書に基づいたデザインカンプを基にデザインレビューを再開します。 ※仕様書、設計書はデザインカンプ作成の前段階、ワイヤーフレーム（UIの設計）の段階でしっかり潰しておきましょう。 レビューの仕方 ・何
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
たった1日で3億円超の現金化が話題に！『CASH』に秘められたデザインの仕掛け。デザイナー 河原香奈子 | CAREER HACK
あまりの反響に公開後わずか16時間でサービス一時停止となった買取アプリ『CASH』。デザイナー 河原 香奈子さんが語ったのはお金を扱うサービスに大切な「佇まい」について。お金をポジティブなものに変えるデザイン理論とは？ 一夜で3.6億円超が利用された『CASH』デザイン秘話 「買取してほしいアイテムをスマホで撮影＆登録すると、瞬時にお金に変わる」 まるで魔法のような体験を提供してくれるのが、買取アプリ『CASH』だ。2017年6月、サービス公開初日に3.6億円超が現金化され、その反響の大きさに、公開後わずか16時間で一時休止へ。 その後、2ヶ月間の休止を経て、サービスを再開。再開後もわずか2時間で1000万円が現金化され、現在、サービスの安定稼働を推し進めている。 『CASH』の一時停止と再開について、インフォグラフィックや動画を載せたランディングページも話題となった。反響の大きさを物語る
黒が際立つスターフライヤーのブランド広告 | ブレーン 2017年10月号
スターフライヤー／輝く人の、スターフライヤー ポスター プロダクトやサービスを一方的に打ち出すのではなく、ユーザーがリアリティをもって輝く自分の姿を投影できるブランドイメージを設計しました。ファッショナブルなトーンでモノクロの世界観を確立し、機体の黒を際立たせるために、ネガポジを反転したかのような表現に挑戦しました。スターフライヤーのご担当の方の強い想いが、このビジュアルの原動力となりました。 （博報堂 アートディレクター 小杉幸一） 企画制作／博報堂 CD／梅村太郎 AD／小杉幸一 C／木村透 D／赤沼夏希 撮影／岡祐介 PR／星美津穂
Material Designから学ぶデザインと技術の共通項
Google I/O 2014 では様々なデバイスが発表されて、ますます Google が日々の生活へ入り込んでいくのだなという印象を受けました。幾つかのプロダクトは興味深かったですが、プロダクトより気になったのが Material Design の発表です。現在 Android L と称されている次期バージョン Android で採用されているデザイン言語のガイドラインです。 Skeuomorphism が全面的に使われていたときは、画面上にあるオブジェクトを触っているような感覚を見た目で演出していましたが、Material Design ではアニメーションを通して触れているような感覚を作り出しています。ときにはカードのような実世界のオブジェクトを模擬していますが、それでもカードを操作しているような感覚を与えているのは見た目ではなく動きだったりします。 感覚からコードへの転換 Mater
クリエイター・デザイナーのためのポータルサイト - クリエイターズバンク
EVENT PickUp 開催中・近日開催のクリエイターイベントをピックアップ！ 近日開催！開催まであと22日 東京都 2024/8/7(水)〜2024/8/10(土) ARTs*LABo 小さいテーマ展『浴衣・祭り・金魚』 イラストレーション "浴衣、祭り、金魚"と言うキーワードから、作家さんが自由にイメージしたオリジナルの作品を展示します。 かつて自由が丘のOne'sさんで開催していた浴衣会(浴衣テーマ)に、夏らしい"祭り&...
フリーランスWebデザイナーという職業も無くなる4つの理由 デザイン会社 ビートラックス: ブログ
全ての事柄のデジタル化が進む中で、Webやインターネットの重要性が年々高まっている事は間違いないだろう。それに伴い、関連する業種や職業に対する需要が高まるのは必然と考えられる。 例えばWebやアプリを製作する為のデザイナーやエンジニアは、紙媒体や組み込み型ソフトウェア向けのそれに比べても必要性が格段に高いとされ、キャリアアップをする場合は新しい技術の習得が求められる。 その一方で、以前に「アメリカでWeb制作会社が存在出来ない5つの理由」で説明させて頂いたとおり、実はこちらサンフランシスコ、シリコンバレー地域では、”Web制作” をメインのビジネスとしている会社はかなり少ない。 むしろ、数年前からビジネスのコアを変換させなければ生き残れない時代に入って来たと言っても間違いないだろう。 絶滅するフリーランスWebデザイナーという職業それでは、フリーランスのWebデザイナーはどうだろうか？We
アートディレクター小杉幸一氏に聞いた「色は言葉で考えよう！」 | 宣伝会議 2014年9月号
ビジュアルの持つ要素の中でも、瞬間的に受け手の印象を決めてしまう「色」。活用できれば結果を出す近道になるが、感覚的で難しいとも思われがち。博報堂のアートディレクター 小杉幸一氏は、「色＝言葉と考えれば、色がもっと身近なものになる」と話す。 言葉から色を考える 表現したい印象を言葉で表し、それを色に置き換えてみた例。それぞれの言葉が色の何を示しているかが分かると、改善すべき点が一気に分かりやすくなる。 基本さえ知れば 色は自分の武器になる 「一般的な色の仕組みや意味を知れば、色を自在に武器として使うことができます。感覚的だから関係ないと思わずに、あらゆる色には使う理由がある、ということから知ってもらえたら」。サッカーの試合に出るのに「ヘディング」や「シュート」という言葉を知らずにプレーができないように、色に関する基本的な知識を知ることは制作物をディレクションする上で大事だと博報堂のアートディ
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
デザイナーがタダ働きにNOと言うべきことが分かる動画 | デザインコラム・ブログ | デザイン作成依頼はASOBOAD
スペックワークを知っていますか？ 日本ではあまり定着していない言葉ですが、「スペックワーク (SPEC WORK)」というものが海外の広告デザイン業界で問題視されています。スペックワークを平たく言えば、「気に入ったらお金を払うよ (気に入らなければ払わない)」という類のクライアントからの要求です。 カナダの広告代理店 Zulu Alpha Kilo は、そんな業界のスペックワークについてNOを掲げ、5年前から提案依頼書の8割を断るという英断を行いました。当初は社員・クライアント含め、非常に混乱したそうですが、その結果、この5年間一度もスペックワークを行わず成長を遂げてきたのです。 そんなZulu Alpha Kiloが、一風変わった映像を制作しました。これを観ればデザイン業界の「スペックワーク」がいかに良くないことであるかが理解できます。スペックワークにNOというべきである！(Say no
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マテリアルデザインの文字サイズについて
Creating a carousel with the PathListBox | .tutorials.pathlistbox | Microsoft Design .toolbox
Functional and visual redesign of Google News
マガジン｜TECH PLAYのイベント・技術情報 - TECH PLAY［テックプレイ］
まちの宝を育てよう。まちいくプロジェクト
香港金工工作坊 Playback Concept | Hong Kong
朗文堂：robundo ‘We love Typography’