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

こんにちは。のっちです。 現在デザインツールが世の中に溢れていますが、その中でも特に注目されているのがデザインと他分野のコラボレーション。 今回は、デザインツールの最新事情やそのコラボレーションについて、各分野の有識者たちがお話ししてくださった『Design & Collaboration』に参加しました。どれもこれから伸びそうだなと思わせてくれるものばかりでした。今回はそちらのイベントレポートです。 （ちなみにトップ画像の文字の周りの円たちは、色々なツールのテーマカラーを散りばめたものとのこと。どれがどれだかわかりますか？） InVision Studioが誰でもアクセス可能にまずはInVision Studioについて、Sketchの書籍でも有名な吉竹さん（@ryo_pan）にお話いただきました。 InVision Studioは、InVision社が新しくリリースするデザインツールで

はじめにメルカリUK版の立ち上げを終え2018年3月に帰国しました@tsumujikazeです。今は東京でメルペイのProduct Managerをしています。 イギリスではいわゆるモダンなプロダクトチームでのLeanなプロダクト開発を経験しました。得るものが多かったので、なるべく多くの人に知ってもらいたいと思いこのポストを書きました。 PMF　→リーンプロダクトのプロセス　→モダンなプロダクトチーム（組織論）という流れになっています。 はじめに 本編 ・何のためにプロダクトを作るのか ・プロダクトマーケットフィット ・PMFピラミッド ・要件定義フェーズのリーン化 ・モダンなプロダクトチームでのリーン開発とは おまけ ・Problem Space vs. Solution Space ・Problem Solution Fitとは ・エンジニア組織とPM組織の特性について ・バリュープロ

アプリがアップデートされた際のリリースノート（変更履歴）は、あまり露出の高くない部分ですが、目を通してみるとその文面は開発者や提供元によって様々で、さらっと書かれたものからユーザーををきちんと意識されたものまであり、ある程度傾向がありそうに思えたので、簡単にまとめてみました。 もっと細かくできたり、発見できてないパターンもありそうですが、大きく分けて、次の4つのタイプに分類できそうです。 ・業務連絡タイプ ・定型文タイプ ・メッセージタイプ ・エモ—ショナルタイプ--- 1. 業務連絡タイプ世にあるアプリの大半がこれに該当するかと思います。あまり読まれることを想定していないタイプなので、箇条書き、または短文で変更点などを記したもので、基本的には淡々とした印象を受けます。知名度が高いものでも、このタイプに当てはまるのは多かったです。 2. 定型文タイプThe コピペ。「編集履歴」とは一体何な

前回のnoteの中で、問題定義の重要性そ問題再提議の具体例をいくつか紹介しました。なるほど、問題を定義し直す事（リフレーミング）でその解決方法の幅が拡がって面白いアイディアが出てくる可能性があると言うことろまではわかったけれど、具体的にはどうすればよいのでしょうか？ 問題を大きくすれば良いと言われたって大きくさせかたには様々な方法があるし、どの程度の大きさにすれば良いんでしょうか。そもそも大抵のアイディアは社会を良くするとか、人々を幸せにするとか、そういったゴールに繋がって居るわけですが、どうすれば「社会を良くすることが出来るか？」なんて問題に正面から取り組んでも正直どこから手を付けて良いのかわかりません。問題が大きすぎるので、もう少し分解してやる必要がありそうです。 問題を再定義するための方法は多くあるので、あくまでもひとつの方法としての紹介ですが、Richard Buchanan氏の論

もうウンザリ 10日、朝日新聞が<「本件は、首相案件」と首相秘書官　加計めぐり面会記録>（https://www.asahi.com/articles/ASL497F9QL49UCLV00S.html）と報じたことを機に、再び加計問題が騒がれている。 森友学園問題が佐川氏の証人喚問で一段落したら、その後は自衛隊の日報問題、そして加計学園問題……とまるで昨年のテープレコーダーを再び回したような展開になっている。 まず、自衛隊の日報問題については、文民統制の観点から深刻であることは指摘しておきたい。そのうえで、問題の本質は、時代遅れのPKO議論にあり、やはり参加5原則の見直しが急務であることも述べておきたい（https://www.zakzak.co.jp/soc/news/180412/soc1804120001-n1.html）。 さて、加計学園問題である。これについては、正直言ってうんざ

はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ

チャーリーです。 追記：ビジネスモデルを図解できるツールキットを販売中です。この記事にあるような図解を自分でもやってみたいという方はぜひ。 もう2018年も1/4が終わったというにわかに信じがたい状況ですが、ビジネスモデルを図解し続けたものがたまってきたのでここらで13個一挙公開します。 - 目次 -俺のフレンチ サマリーポケット 未来食堂 Cansell プチローソン Unipos SCOUTER ポプテピピック ZOZOSUIT Optoro Fundbox PillPack Farmers Business Network 100の事例を図解した「ビジネスモデル2.0図鑑」という本を発売しています（本記事の事例ふくむ）。予約開始と同時にnoteで全文無料公開という試みをやっています。本記事に興味を持ったらそちらもどうぞ！ 俺のフレンチ俺の株式会社は2012年創業、あのブックオフの創業

「デザインするときは、まず情報収集して、コンセプト決めて、案を発散して。。。」 デザインプロセスに関して、いろんなサイトやデザイナーの方々が言及されています。 でも、初学者デザイナーである僕はいつも 「理想のプロセスはわかるけど、実践するとなるとわからんこと多すぎるし、そんなうまくいかねええよおおお」 ってなるんです。 そこで、自分がデザインしたプロセスをしっかり言語化して明らかにすることで、理想のプロセスに近づけるという試みをしようと思います。 ということで、この記事では、ポケモンで言う「トキワの森」に迷っちゃってるレベルの僕のデザインプロセスを書いていこうと思います。 この記事を書く目的は、80%自分のためです。 自分が振り返るためです。 20%はもしかしたら、他の人の役に立つかもしれん。 「あーこういうことはやらんとこ〜」とか「試しにこのやり方やってみるか」とか。 あとは、「ノンデザ

配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を

今回は、サービスデザイナーとして、マネーフォワードiOSアプリのデザインリニューアル（2014年5月公開バージョン）のほか、大手新聞社新規メディアアプリなどを担当し、現在はヘルスケアベンチャーFiNCのアプリ・サービスデザインを担当する齋藤 恵太のインタビューをお届けします。 クライアントワークに従事する傍ら、社内勉強会やPodcast、ラボサークルの立ち上げなどリーダーとして組織にも貢献する齋藤が、どんな想いを抱いてグッドパッチで働くのか。そしてこれから目指す先の展望について、話を聞きました。 「サービスデザイナー」ができるまで学生時代、研究室のアルバイトでサイトのコーディングを手伝っていた制作会社に、そのまま新卒として入社しました。主にコーポレートサイトなどを手がける少人数の会社でしたね。近所の会社が開催していたUI関連の勉強会に参加して、そこに来ていたグッドパッチのメンバーに会ったこ

前回の記事では、コードを学んだ経験がインタラクションを重視したデザインをするきっかけになったという話を書きました。 今回はマイクロインタラクションとコードについてです。 マイクロインタラクションとは？僕がマイクロインタラクションという言葉を知ったのは、この本がきっかけでした。 アプリやWebサービスを使っていると、些細だけど使いやすさに繋がっていたり、他のアプリにはない特徴となっているインタラクションに出会うことがあります。登録フォームのパスワードの安全性を示すバーや、いいねボタンを押した際の一瞬のアニメーションなど表現や目的は様々です。 この本では、こうしたインタラクションが ・小さいけれど気の利いたアイディア ・「こよなく愛する製品」と「許容範囲の製品」の違いを生むものであるとされ、様々な事例と共に分析されています。事例を眺めるだけでも楽める本なので是非手にとってみてください。 マイク

いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます

＜更新＞ ページ下部におまけとして有料部分を追加し、ワークショップとして使用したスライドを添付しました。ほとんど無料で読めます。 ----------------------------------------------------------------------------- デザイン思考にはHMW(How Might WE)というメソッド？があるそうです。僕自身はあまり明るくない分野なので、ここでは詳しい方の説明を貼ることにします。以下のブログがとてもわかりやすかったです。 デザインにおけるHow Might Weとは何か：具体例とその効果 - デザインダイアローグコペンハーゲン How Might Weと言うのは、日本語にすれば「我々はどうすれば◯◯できるか」というカタチで、解くべき問題を定義する方法です。約10年前にIDEOが使い始めたのち、今では世界中の多くのデザインファー

VASILYのデザインチームでは、「IQON」をはじめとするUIデザインに多くの時間を充てていますが、ファッションブランドとのタイアップ企画や、採用イベント用の広報物など、ビジュアルデザインにも力を入れています。 下記は今週開催されているtry! Swiftでの様子です。ブースのグラフィックや配布パンフレットなどを社内で制作しました。 そういったこともあり、VASILYのデザインチームでは基礎デザインスキルのひとつとして、タイポグラフィも大切にしています。 UIデザインをメインに取り組んできた方や、Webデザインからスタートした方の中には、タイポグラフィに苦手意識を持っているデザイナーもいるかもしれません。 タイポグラフィは突き詰めれば突き詰めるほど奥深いデザインですが、今回はそんな苦手意識のある方や、これまで取り組む機会がなかった方向けに、今すぐ使えるタイポグラフィTIPSをご紹介します

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

Sass、Less、Stylusなどのプリプロセッサーよりも柔軟に、必要な機能を選んで使えるCSS変換ツール「PostCSS」。海外のフロントエンド開発界隈で普及しつつある人気ツールの導入方法とおすすめプラグインをチェック。 SitePointではPostCSSの記事を『An Introduction to PostCSS』『How to Use PostCSS with Gulp』『PostCSS Mythbusting: Four PostCSS Myths Busted』などで何度も特集してきましたが、いまだに多くの人が混乱してしまっているようです。PostCSSを一言で表すと、 PostCSSはうんざりするような仕事をあなたの代わりに処理してくれるものです PostCSSはSass、Less、StylusのようにソースコードをCSSにコンパイルする、簡潔なプログラミング言語を提供す