こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。 グリッドの59分割ヤバイよねぇというお話。 画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、 ・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。 これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid （厳密には10の倍数でないので△） 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割

シンプルにデザインする方法を学び、なぜデザインが過度に複雑になってしまうのかを知りましょう。もっとも成功した企業が作り出し、広く使われているプロダクトの多くは明らかにシンプルなものです。 また、シンプルさは一部の企業が競合よりも成功している主な理由でもあります。Googleの検索エンジンや、AppleのiPhone、WhatsAppメッセンジャー、よくできている天気ウィジェットなどは、シンプルさが表に出ている人気プロダクトのほんの一例です。 この記事ではシンプルさを見分けて獲得する方法と、シンプルさがすぐれたUIをもたらす理由を紹介します。 シンプルさとは何か？ 今シンプルなものが大流行しています。シンプルさは、成功した企業とそのファンの多くに支持されているデザイン哲学です。大成功を納めているApple社はデザインのシンプルさを求めて常に戦ってきました。米国出身の起業家であり投資家でもあっ

ウェブデザインやフリーペーパーといった物理的なデザインをする際には、人に訴える力を持つ「見やすい」色の組み合わせを見つけ出すことはかなり重要です。背景色と文字色の組み合わせが「アリ」なのか「ナシ」なのかを一目でわかるようにする「Accessible Brand Colors」を使えば、悩みがちな色の組み合わせを直感的にさくっと決められそうだったので、実際に使ってみました。 Accessible Brand Colors by Use All Five https://abc.useallfive.com/ 上記URLにアクセス後、画面右上の「＋」をクリック。 カラーピッカーが現れるので…… 色相や明暗を調整して「Add hex」をクリック。カラーコードを指定することも可能です。 するとこんな感じで1色目が決定。同様に下側の「＋」もクリック。 色を選択して「Add hex」をクリックします。

初期コーディング時間を 85%削減します 日米特許取得のAIがデザインカンプを解析し HTML,CSSなどのコーディング候補を自動出力 デモを聞いてみる

どうもみなさんこんにちは〜！ AID（Ameba Innovation Designers）というデザイナー組織に所属している、松本です。「Ameba占い館SATORI」のデザインを担当しています。 今回は、AIDのロゴができるまでにやった5つのことをお話ししたいと思います。 AIDってなに？ AIDとは「Ameba Innovation Designers」の略で、Amebaが提供しているサブブランド事業のデザイナーの集まりです。 Amebaサブブランド事業をDESIGNでAID(助成、促進)し、Innovationを起こすことを目的としています。 今までに、メンバー各自で一つテーマを決めて研究＆発表をしたり、勉強会やデザインコンペの開催をしてきました。 ▼Amebaのサブブランド事業 AIDの活動を広げていく上で、チームの共通認識を持ったり、社内外の認知を向上するために、組織のブランデ

デザイン批評や伝え方のセミナーやワークショップはもちろん、関連記事も幾つか書いています。しかし、だからといって完璧なデザインの会話ができているわけではありません。デザインという言葉の捉え方を合わせるのに苦労することもあれば、いつの間にか話が脱線してしまうことも少なくありません。 書籍などで知識を得ることはできますが、知識があれば必ずうまく実践できるとは限りません。たとえ自分自身に高いスキルがあったとしても、周りを巻き込まなければコミュニケーションは成立しません。セミナーやワークショップを受講された方から「私は理解できたが、周りにどう言えば良いか分からない」という感想をいただくことがあります。デザインについて語るのに難儀している状態だと、建設的な会話を促すのは至難の業です。 記事やプレゼン資料を社内共有するのもひとつですが、スルーされてしまう場合もありますし、いざ会議の場になると忘れてしまう

あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を

こんにちは。 メルカリデザインブログです。 メルカリは2018年10月31日にロゴのリニューアルを行いました。 ロゴのリニューアルを起点としたリブランディングは、社内に新設されたCXO Design Team主導による、社内外を巻き込んだ大きなプロジェクトです。 企業の大々的なリブランディングは頻繁に行われるものではありません。 だからこそ、その舞台裏や背景、補助線となるような情報を広く共有し、デザイン組織のノウハウを伝えていきたいと考えています。 デザインブログでは、複数回に分けて取り上げます。 目次 ・なぜ、ロゴを変えたのか ・メルカリのこれからを表現する ・汎用性の高いロゴを目指す ・リブランディングを行うチーム ・実際の制作プロセス ・イベント告知 なぜ、ロゴを変えたのかリブランディングにおいてロゴのリニューアルは大きな比重を占めるトピック。コミュニケーション設計の支柱になります。

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる

以前、勉強会でデザインの基礎と錯覚についてプレゼンをしたところ、思いのほか興味を持っていただいたので、普段のデザイン業務にも活かしていただけるように5つの錯覚についてまとめたいと思います。 ・デザインに役立つ目の錯覚（錯視）について知りたい方 ・これまで錯覚を気にしていなかったデザイナーの方 ・駆け出しのUIデザイナーの方 などに参考にしていただけると幸いです。 【目次】 ①錯覚とは ②具体的な5つの目の錯覚の例 1.ミュラー・リヤー錯視 2.ヘルムホルツの正方形 3.正方形・ダイヤモンド形錯視 4.ジャストロー錯視 5.ポッゲンドルフ錯視 ③錯覚を考慮したデザイン事例 ④最後に ①錯覚とはまずは錯覚とは何かをおさらいしておきましょう。 錯覚（さっかく、英:illusion）とは、感覚器に異常がないのにもかかわらず、実際とは異なる知覚を得てしまう現象のことである。対象物に対して誤った感覚や

いろいろな表紙デザインの“あるある”や作り方を表紙内で表現した「#それっぽくなる表紙」 がTwitterで話題になっています。 最近は送られてきた画像で「ない本」を作ったり、小説で小説の書き方を説明する「それっぽくなる小説講座」が話題になりましたが、それと同様に表紙で使われているデザインのアイデアを例とともに“表紙の文字”で紹介。例えば、ぼかした背景全面に書かれた「ほそい文字は全画面」や、ななめで軽く見切れた「見切れは 正義 傾けたほうが置きやすいです」など、写真やイラストに文字を入れる際に手軽に使える簡単な方法が説明されています。 シンプルなのにすごくオシャレな印象 あえて文字を見切れさせるというテクニック 文字で写真にある直線を挟めばそれっぽく 思わず「なるほど」と思える説得力…… また同時に「こういう表紙見たことある！」といった“あるある”としても楽しめ、その分説得力もあってわかりや

🐕️ @54jpd09 今まで作った表紙だが… 一枚目：絵に文字を重ねて後は揃えとけ 二枚目：正方形で揃えとけ 三枚目：タイトル斜め、写真はぼかしてりして効果的にしとけ #それっぽくなる表紙 pic.twitter.com/SOOvvkYgFH 2018-10-24 21:34:52

Webサイトにファビコン（favicon）を設定しておくことで、ブラウザのタブやGoogleの検索結果にアイコンが表示されるようになります。 今回は、2021年現在のファビコン（favicon）の設定方法とおすすめの作成ツールについてご紹介したいと思います。 ファビコン（favicon）とは？ ファビコンとは、Webページごとに設定されるブラウザのタブなどに表示されるアイコンのことです。 PCのブラウザでWebサイトを開くと、タブごとにサイト名の隣にアイコン画像が表示されますが、その画像はWebページ側で指定したアイコンが表示されるようになっていて、ブラウザでの見た目が分かりやすくなるだけでなく、Webサイトのブランディングやイメージ作りにも影響を与えます。 ファビコンは、主に下記の箇所に表示されます。 必ずファビコンを設定しないといけないわけではありませんが、ファビコンが設定されていない

明治時代に発展した日本画は、日本の伝統や文化に関心を持つ外国人の間でも非常に人気がある芸術品の一つだ。 その中には、時を経てその価値や魅力を再認識されるものも多いが、オンラインで無料公開となった『波紋集』というデザイン帖が海外で話題になっている。 それは森雄山という明治の日本画家が、全3冊にわたって残した波のモチーフ集で、波一つにも多様な表現がある日本画の奥深さがうかがえる素晴らしい本だ。

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を

配色を学べる『やさしい配色の教科書［改訂版］』がMdNから発売されました。価格は税別1800円。 『やさしい配色の教科書［改訂版］』 同書は2015年に出版され好評を博した『やさしい配色の教科書』を、図版とデザインを刷新して改訂したもの。まずこれだけ覚えておけば大丈夫という最低限必要な「色のルール」を厳選したとし、「配色の基礎知識」「配色の心理効果と視覚効果」「配色の組み合わせ」「配色のイメージ表現」「配色の実践」の5章で構成されています。 advertisement 関連記事 漫画家直伝イラストテクニック（4）：誰でも描けるリアル背景、「岩」「地面」の描き方 紙とペンを用意して、ぜひ試してみてください！ 観察力をつけたい人にも　短時間で描くためのヒントが詰まった書籍『5分間スケッチのススメ：建物を描く』発売 スケッチャーで建築家のリズ・スティール氏による書籍の日本語版です。 漫画家直伝イ

「わかりやすさ」と「新鮮さ」の両立を目指して ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。 そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。 スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。 いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。UIデザインを担当した、橘 磨理子さんは「わかりやすさ」と「新鮮さ」の両立を意識したという。 「UIは“わかりやすさ”が何よりも大事で、目立ってはいけないものだと思っていたのですが、アートディレクターからは“新鮮

紙のデザインはメインの仕事ではないけれど、ロゴ制作の依頼に合わせて、名刺の依頼もいただくことが多い。頻度は高くないものの、1年に数回はあるので、自分のメモも兼ねて名刺デザインについてまとめてみたいと思う。 この記事は実験的に有料にしていますが、投げ銭制度となっており、購入しなくてもすべて読めます。その代わり購入いただいた方にはオマケでこの記事用につくった名刺のIllustratorデータをダウンロードいただけます。基本フォーマットまず基本的なこととして、名刺のサイズは「55 × 91mm」 海外だともう一回り小さな名刺が主流で「51 × 89mm」 載せる内容意外と依頼する側は何を載せるのか決まってなかったりする。そのため、まずこちらから項目を渡し、載せたい情報のみを教えてもらうと良い。 名前 フリガナ（ローマ字、平仮名。大抵はローマ字） 肩書 会社名 電話番号 メールアドレス URL S