ベクターシェルフの管理人のはちふら(8flagsdesign)です。 独学でデザイナーになって10年。 グラフィック・プロダクトデザイン・webデザイン・企画制作を仕事にしています。 特に得意なのはロジカルな商用デザインです。 どうぞよろしくお願いいたします。
![ベクターシェルフ](https://cdn-ak-scissors.b.st-hatena.com/image/square/626c10428be43d86eeac90cfd8403899cfd8fa57/height=288;version=1;width=512/http%3A%2F%2Fvectorshelf.com%2Fwp-content%2Fuploads%2F2020%2F07%2Fogpimage.jpg)
デザインスタジオであるSTARRYWORKS inc.は、昨年秋からロースター・カフェを開業しました。そのお店の名前に合わせて「Hue」という欧文書体を開発することになった、そのプロセスや開発の裏側を紹介したいと思います。 1. お店のコンセプトは「色で選ぶコーヒー」お店の名前は「Hue Coffee Roaster」といいます。「Hue」(ヒュー)は色相や色味という意味の英語で、コーヒーのメニュー名を産地や豆の品種、焙煎度合などではなく、「色」の名前で表現することでより気軽にさまざまなコーヒーを楽しんでいただくことをコンセプトとしています。 お店のInstagram 私はコーヒーが好きで毎日飲みますが、豆の品種や産地などは詳しくなく覚えられずにいました。以前注文したものが美味しかったからまた飲みたいと思ったり、前回とは違うものに挑戦してみたいと思っても、ややこしい地名などで覚えられず、う
「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の5月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ
私が新卒で配属されたのは営業でした。 ただ、初対面の人と話すのが苦手という典型的な人見知りだったため、コミュニケーション力で勝負する営業や、それに類する職種では生き残れないと思いました。デザイナーという職業に転職したのは、「自分の腕で勝負する仕事に就いた方がいい」という私なりの生存戦略だったわけです。 しかし、デザイナーになって、余程の天才でない限り、腕(=専門スキル)だけではやっていけないことに気が付きました。 コミュニケーション力に関してはもしかしたら営業と同レベルで必要かもしれません。デザイナーとして本当に良い仕事がしたければ、デザインに関する専門スキルだけにフォーカスせず、仕事の中でカバーする領域をもっと拡げるべきだと思うようになりました。 デザイナーがカバーすべき3つのデザイン領域 私が考えるデザイナーがカバーすべきデザイン領域とは、図にすると以下のようなものです。 それぞれにつ
この記事は下記の記事に触発されて、逆方向の「エンジニアの自分がどういうモチベーションでどうデザインの勉強をしていったか」というのを語ってみよう!という内容となっております。 あと最近よく「なんでデザインし始めたの?」「どうやって勉強してるの?」という質問をいただく機会が増えてきたので、それへのアンサーともなればなと思います。 なぜデザインを勉強し始めたのか結論から言うと必要に駆られて勉強し始めました。 前職はスタートアップに勤めていたのですが、当時作り始めていた新規サービスに携わっている人はエンジニア2名 + デザイナー1名という少数のチームでした。 ただデザイナーともう一人のエンジニアは他のプロジェクトにかかりきり…なので一時期この新規サービスの開発は私だけという状況でした。 そこで困ったのがデザインがないこと。大まかなワイヤーフレームは握っていましたが、デザインがないのでフロントの仕事
リモートワークガチ勢!M1 Max MacBook Proを使った北野氏の作業環境 ウルトラワイドのスタックモニター+縦置きモニターという抜け穴なしの最強コンビネーション M1 MacBook ProからM1 Pro MacBook Proに買い替えて生活が変わった点を挙げるとすれば、外部ディスプレイの出力制限が大幅に緩和されたこと。DisplayLinkアダプタなどを使わず、5K2Kディスプレイと4Kディスプレイを表示できる。 ケーブル1本で、ウルトラワイドモニター2枚と4Kディスプレイ1枚を出力したロマンに溢れるM1 MacBook Pro作業環境を構築していたアクティア株式会社の北野幸雄さんも、”作業環境ガチ勢”として14インチM1 Max MacBook Proに買い替え。最新の環境を送っていただいたので、紹介させてもらいたい。 M1 Max MacBook Proへの買い替えは大
自作のPDFライブラリがきっかけで、オーストリアの会社と仕事ができた。 とてもいい経験だったので振り返りを行いたいと思う。 自分について ・サラリーマン+個人事業主のWebエンジニア ・個人事業ではPDFを作成できるWebサービスを作っています ・サービスのPDF作成処理はライブラリとしてGithubでソースコードを公開しています そういえば過去にこんな記事を書いていました。この記事の続きとして見ても面白いかも。 このライブラリが今では268のスターを獲得し、なんとお仕事まで獲得してくれました! オープンソースをやりたい人のモチベーションやきっかけになれると嬉しいです。 ある日突然メールが届く オーストリアの会社からメールが届いた。電子カルテのサービスを作っている会社だそう。 PDFのデザインができる画面が必要とのこと。 そこで下記のような帳票のデザインページを開発してくれないか?と話が来
CDOとしてクラスメソッドにジョインした私の役割は、「デザイン組織を作ること」です。 しかしそもそも「組織を作る」とはどういうことなのでしょうか? さらにいえば「組織」とは何なのでしょうか? 例えば4人が集まっていればそれは「集団」であるといえますが、何があれば「集団」ではなく「組織」になるのでしょうか。 この「組織の定義」を紐解くことがデザイン組織作りの大きなヒントになるのではないかと思い、改めて考えを整理してみました。 組織の定義 「組織」という言葉はあまりにも当たり前に存在しすぎてて、組織がテーマのビジネス書であっても明確な定義がなされていないことも多いです。 P.F.ドラッカーの名著『マネジメント(エッセンシャル版)』では、「マネジメントなしに組織はない」と冒頭に語られます。しかし組織が何であるかの定義は特になく、そのまま話は進んでいきます。 世界中の経営者やマネージャーに影響を与
ユーザーがほしがるものは「不合理な代替手段」から生まれる。日本初のフリマアプリ「フリル」や「B/43」を生んだチームに聞く、ユーザーインタビューで課題発掘するコツ 家計簿プリカ&アプリの「B/43」さんを取材しました。 ※ 株式会社スマートバンク CEO 堀井 翔太 さん、CXO takejune さん B/43(ビーヨンサン)について教えてください。堀井: チャージして支払うだけで、予算管理ができる「家計簿プリカ」です。今はユーザー層としては、10〜30代が85%を占めています。 用途としては、例えば「今月は食費を○万円以内にしたい」という感じで、特定の支出が予算以内になるように、管理している方が多いです。 ペア口座もつくれるため、夫婦やパートナーで「共有で支出管理をしたい」といった使い方も増えてきていますね。 どうして「B/43」をつくろうと考えたのですか?堀井: ひとつは「未来からの
2021年12月3日に本テキストブックを題材に、デザイン経営の考え方や導入方法、テキストブックの制作秘話などについて語るオンラインイベントが開催されました。下記のリンク先からアーカイブ動画をご覧いただけます。 詳しくはこちら(外部サイト) > 富士通のこれまでの実践から得られたノウハウと、イタリアのミラノ工科大学デザインスクールPOLI.Designの研究成果やフィロソフィーを組み合わせた、デザイン思考のテキストブック「Transformation by Design デジタルトランスフォーメーションに挑戦するデザイン戦略とサービスプランニング」(日本語版・英語版)を公開いたします。このテキストブックはPDFで閲覧可能です。またテキストブック制作の背景や制作チームの想いなど、制作のディレクターを務めた宇多村志伸と高嶋大介に話を聞きましたので、ぜひダウンロードの際に併せてお読みください。
“シリコンバレーを作った人物の1人”と称され、故スティーブ・ジョブズ氏が頼りにした人物がいる。 レジス・マッケンナ氏。 半導体関連の企業で働いたあと、70年代にみずからのマーケティング会社を設立した、マーケティングのプロだ。 あるときマッケンナ氏は、うわさを聞きつけたジョブズ氏から電話でコンタクトを受け、ジョブズ氏、そしてエンジニアのスティーブ・ウォズニアック氏との打ち合わせにのぞんだ。 相談は「アップルII」(1977年発売)というコンピューターのマーケティングについて。 ジョブズ氏らは、製品についての記事を雑誌に載せる方針を明かした。 マッケンナ氏は、その内容があまりに専門的で、一般の消費者には受け入れられないと感じ、「市場を広げたいなら、自分と同じようなタイプの人たちに発信するのではだめだ。記事は書き直すべきだ」と助言した。 ところが2人はその意見を気に入らず、部屋を出ていってしまっ
ある日、上司から衝撃的なお知らせがあった。 「私たちのチームは解散します」 たぶん、”一つの会社が倒産する時の雰囲気”みたいな、悲しさと不安の混ざった、なんとも言えない空気がチームに漂っていた。 解散の理由:事業部制だから私たちの会社は事業部制。元々自分の所属組織は本社組織の一部だったが今回の異動で、私は普段自分がよく一緒に仕事をしている事業部へと異動になった。 他チームの人も別事業部へ異動があったりで、元の部門は約半分の規模に縮小することになる。 本社組織は全体的にコストセンターとして“稼がないけど費用がかかる”組織とうちの会社では認識されてて、基本的に効率化や圧縮が求められる(らしい、知らんけど。) なので今の枠組みで考えると「貢献してる事業部に行きなさい」というのは理解はできる。 でも、本社組織にUXデザインを見ている部門があることには、もちろん理由があったわけで…。 UXデザインに
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
俺だ。SmartHR VP of ProductDesign の @ouji だ。 俺は長年 SmartHR でプロダクトデザイナーをやってきた。 長年といっても数年や十数年なんてちゃちな時間じゃねえ。お前がまだ培養液シリンダーの中を漂うボウフラだった頃から俺はイカれたエンジニアや狂った PdM(プロダクトマネージャー) と火花を散らしてきた。文字通りお互いのヘヴィメタルをぶつけて死合ってきたんだ。 あの頃の SmartHR は今ほどお行儀の良い開発体制なんてなかった。 六本木のインプラントショップで PdM と万が一にも鉢会おうものなら一触即発だった。どちらかのヘヴィメタルが使い物にならなくなるまで殴り合うはめになった。 だから俺はプロダクトデザイナーとして身を守る術を身につける必要があったんだ。 これからプロダクトデザイナーとして SmartHR でヘヴィメタルするお前に、俺が生き抜く
フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊して見るようにしています。今回は、私が参考にしているギャラリーサイトを11個紹介します。クライアントとの打ち合わせ時も担当者とイメージを共有できるので便利に利用できると思います。ぜひ参考にしてみてください。 URAGAWA担当した制作会社を掲載しているギャラリーサイト。制作会社ごとに見て回れるのはおもしろい。カテゴリ分けも『業界』『タイプ』『特徴』『カラー』『特集』『アワード受賞』『ランキング』と他にはない分類ですが意外と使いやすいです。制作の裏側記事もあってWebデザインの参考だけではなく読み物としても楽しめます。 URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集 紹介文URAGAWAは、クリエイティブカンパニーの情報を蓄積していくことで、
突然ですが、ここに一つのプロダクトがあるとします。 そのプロダクトを見つめる視線には様々な種類があります。 そのプロダクトを利用しているユーザーの視点、利用していないが存在は知っているという人の視点、それをつくるデザイナーの視点、プロダクトを運営している会社経営者の視点… もしあなたがデザイナーであれば、デザイナーの視点だけが唯一自分で体感できる「主観」で、それ以外はすべて「客観」となります。 主観と客観のスイッチング プロダクトデザイナーはユーザーの期待通りに正しく動くしくみを設計し、「このプロダクトを利用した時に、ユーザーの生活はどう変化していくのだろうか?」と問いを立てながらアウトプットを評価していきます。 自らの考える理想像をデザインしながら、一方でそれに触れるユーザーの様子を想像する…プロダクトデザイナーは主観と客観を電気のスイッチのように瞬時に切り替えることに長けた人が多いイメ
レトロRPG風デザインのオンラインビデオ通話スペース『 Gather.Town 』で”出社して仕事&気軽に雑談”を楽しく仮想体験! 弊社クラスメソッドは以前からリモートワーク(テレワーク)は全社的に利用出来る体制にあり、2020年初頭以降のコロナ禍を経て(ほぼ)フルリモート体制にシフトした際もそこまで大きな混乱は無く、各種SaaSサービスを活用して比較的円滑に日々の業務をこなしてこれているように思います。 とはいえ、それでもやはり実際にオフィスに出社して仕事をする、また顔を合わせて会話をする(仕事の話でも、雑談でも)というのは良いものですね。特に後者の『会話』の部分についてはリモート体制に移行することで"あそび"の部分がごっそり失われてしまった...というのが大きな変化になったと感じる方は多いのでは無いでしょうか。昨今の状況にあっては、実際に顔を合わせるのは勿論のこと、顔を合わせるために移
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版(770KB) BtoBサイト標準ワイヤーフレーム
「ビジネスの仕組みがわかる 図解のつくりかた」という本を全文公開します!この本は、2020年4月に出版されたスマホサイズのコンパクトな新書です。『ビジネスモデル2.0図鑑』を出版後、多くの反響をいただき、さまざまな企業でビジネスモデル図解について講演・ワークショップを開催してきたノウハウを凝縮した一冊になっています。 ※当記事の情報を転載、複製、改変等は禁止いたします それではここから全文公開をご覧ください。 第1章:ビジネスモデル図解、基本の「き」はじめに 僕たちが『ビジネスモデル2.0図鑑』を出版したのは2018年9月のことです。「Amazon Go」や「Spotify」など、100の事例のビジネスモデルを同じフォーマットで図解した本は、7万部を超えるベストセラーになりました。その後さまざまな反響を得て、企業から多数の講演・ワークショップの依頼をいただきました。「ビジネスモデルを自分で
UXの全部入り感がもたらす不安UX について勉強を始めると、一度くらい「The Disciplines of User Experience Design」のような概念図を目にすると思います。 UX には UI デザインやモーションデザインといった視覚的な部分だけでなく、心理学や社会学といった人の認知や行動の理解も必要ということが見て分かります。 Dan Saffer が考案したベン図を Thomas Gläser がリファインしたものこの図だけでなく、UX をテーマにしたインフォグラフィックは他にもたくさんあります。図によって切り口や詳細度が異なりますが、ひとつ共通点があるとすれば、UX には多分野の知識が欠かせないことを表している点。様々な分野を包括した何かが UX であると表現しています。 体験ですから見た目だけに止まらないのは納得です。また、UX デザイナーとして仕事をしていれば、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く