こんにちは、デザイナーの佐野大河@sn_taigaです。先日、クックパッドのiOSアプリで「キッチンレポート」という自分のレシピ投稿の活動の成果がわかる機能をリニューアルしました。今日はそのデザインプロセスについてお話します。 キッチンレポートとはキッチンレポートでは、自分の投稿したレシピやマイページへのアクセス数が見られる他、個々のレシピのアクセスランキングやつくれぽ（レシピを見て料理した人から届くメッセージ）などが見られます。レシピが保存された数や印刷された数もわかり 「自分のレシピが誰かの役に立っている！」という実感を持つことができます。 他にも「公開レシピが30品になりました！」や「あなたのレシピが人気順検索でトップ10入りしました！」など、自分が投稿したレシピに関する嬉しい出来事を残してくれる機能もあり、ユーザーの継続的なレシピ投稿や日々の料理のモチベーションにも繋がっています。

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー

こんにちは！ちづみ です！(ブログはこちら）（＾_＾） 以前このようなツイートをして、少し反響があったので、私がいつもXDでwebデザインの模写する時に行っている手順をnoteにまとめました😊 ✅拡張を駆使した速い模写の準備(XD) クロームの拡張Window Resizer で予定のカンプの幅にブラウザを変更 ↓ クロームの拡張Full Page Screen Captureでスクショ ↓ XDの拡張Mimicにurlをコピペ ↓ スクショを複製し1枚はトレース用に薄くひく ↓ サイトの検証も見ながら数値等を確かめつつ模写 pic.twitter.com/BSV8KPnBNM — ちづみ (@098ra0209) October 6, 2019

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

ラグビーワールドカップが始まってから４週間、僕は毎日ワクワク過ごしています。 もちろん、いちスポーツファンとして日本の快進撃を楽しんでるんですが、それ以上に、マーケティング的に「へぇ〜」という学びが多くて、そういう意味でワクワクしてる毎日です。 全てを俯瞰して見てるわけじゃないんでランダムですが、"ハタ"から見て「これいいなぁ」と思った施策を紹介しようと思います。 チケットデザインまず最初に目についた施策、チケットデザイン。日本文化を表現する「武者絵」のイラストでラグビーを表現した、リッチなデザイン。 デザインの良し悪しというより、 ・スタジアム観戦者 = いちばん熱量が高いオーディエンスに対して、UGCが生まれるように仕掛けている点 ・上記全員に行き渡るチケットに目をつけて仕掛けた点 これらの視点が、効率的で賢い施策だなぁと思いました。 電子化されたり、文字要素だけの簡素化されたコンビニ

#26 WP ZoomUP でお話した内容です。 「WordPressテーマ、つくれますか？」

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感

ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ

PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ

見出しはデザインの印象を大きく左右する要素のひとつ。デザインをしている人ならこの箇所で行き詰まったのは一度や二度ではないでしょう。試行錯誤してるんだけどなんかしっくりこない。。と悩んでいる人も多いはず。今回はそんな行き詰まりがちな見出しのデザインを作るためのアイデアや考え方をご紹介したいと思います。 見出しデザインの基本的な考え方 見出しの役割は「本文を読んでもらうためのきっかけ」です。 Webサイトや紙面を見ようとしたとき、見出しがなく本文だけだったらと想像してみましょう。どこに何が書いているのかが一見してわからず、思わず本を閉じてしまう（または別のWebサイトを見に行く）のではないでしょうか。見出しには「目に飛び込んでくる情報を整理して効果的に伝える」という役割があります。 ここに「見出し」と「本文」という関係が見えてきます。見出しで見る人の興味を惹き、本文を読ませる。サッカーのパス回

こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト

※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw

milieu編集長。1988年大阪・千里生まれ。京都市立芸術大学 美術学部 総合芸術学科卒業。大学時代にアートマガジンSHAKE ART！を創刊、展覧会のキュレーションやメディア運営を行う。2012年CINRA入社、WEBディレクター・PRを経て2015年からフリーランス。執筆・司会業などを行う。THE BAKE MAGAZINE編集長、DemoDay.Tokyoオーガナイザーなども兼任。Twitter  |  Instagram  |  Facebook こんにちは！milieuというWEBメディアの運営をしている塩谷舞（@ciotan）と申します。ときには「WEB編集者」と呼ばれることもあります。 この「WEB編集者」って肩書き、ここ数年でよく耳にするようになりました。この求人サイトCINRA.JOBにも「WEB編集者」の募集がチラホラ見られます。 「わざわざWEBってつける必要あるの

今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。 レスポンシブ対応 以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。 使い方（初心者向け） CSSが反映されないときはこちら シンプルな四角い吹き出し4つ 最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。 ちなみに下から伸びる三角形は疑似要素（before）で表現しています。興味のある方は下の記事に目を通してみてくださ

クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア