こんにちは、シフトブレインでエンジニアとして働いている安田（@_yuheiy）です。 先日、株式会社ボーンデジタルから出版された書籍『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』に、監訳者のひとりとして携わりました。 本書は、CSSにおけるレイアウトをテーマとしていますが、同時に、それをあらゆる環境においても破綻することなく、堅牢に実現するための、CSS全般について言える哲学を追求したような書籍です。レイアウトとはどのようにあるべきで、そしてCSSとしてどのように表現されるべきであるかという態度において、首尾一貫した理論を提示するものです。 このように、筆者独自の意見が強く主張される書籍はCSSの文脈では珍しく思えます。しかし本書の主張は、私自身のかねてからの問題意識とも重なるところが多く、また昨今の業界的な常識にアンチテーゼを唱える重要な問題提起だと

公開から随分経ってしまいましたが、ようやく「フリクリ２」と「フリクリ３」の脚本を公開できることになりました。 劇場版をご覧になった方も、ご覧になってない方も、是非是非お読みください。（これから毎日UPしていきます） アニメの脚本を読むことって、そんなにないと思います。 が、この「フリクリ」は初代となる「無印」をご覧いただいた方々も知っての通り、「みんながそれぞれに解釈し、それぞれに真実となるフリクリがある」という、とても特殊な作品です。 ですので、すでに公開された「２」「３」が、お客さん達それぞれに真実があるのと同じように、監督それぞれにも、そして脚本家にも真実があると思っています。 まあ、硬い書き方になりましたが、ようは、それぞれの優れた監督達の作品になる前の「脚本段階」の「フリクリ２」「フリクリ３」も、これはこれで独立した作品だと思ってもらって、それぞれで解釈し、声を当ててみたい人は当

僕の今の仕事というのは、デザイナーと（フロントエンド）エンジニアの間の立ち位置でいろんなことをしている。その重要な仕事のひとつが、このセッションの主題のようなデザインの言語化への取り組みをリードするということ。 具体的にやっていることの一つをあげると、例えばスライドにあるような、あるUIコンポーネントのことを何と呼ぶか、またコンポーネントの粒度についての話し合いの場を設けるようなことをする。はじめから原則と呼べるようなものがあればいいが、なかなかはじめから立てるのは難しく、各々の考え方・価値観というのをすり合わすため、ほぼ毎日に話し合いを時間をとって進めていたりする。 はじめはデザイナーが起こすデザインカンプ、といっても完全なものではなくある程度整ったSketchデータを確認しながらインベントリとしてUIコンポーネントを抽出する。そのコレクションからパターンやルールとして考えうることをデザ

はじめに院内の掲示板や壁には様々な掲示物が貼られているが、作成している部署がそれぞれ異なるため、用紙の向きやフォントなどは統一されていなかった。そこで、雑然としている掲示物をもっと見やすくするために、デザインを統一することにした。 方法掲示物はこれまでWindowsで作成されていたが、きれいな文字の印刷物を作成するにはMac以外に選択肢はなかった。掲示物の基本的なサイズはA4サイズの横向きに統一し、情報量が多いものや目立たせたいものはA3で作成することにした。 掲示物の構成は見出しと本文のみとし、見出しの文章は、誰に向けた掲示物なのかが簡単にわかるようなフレーズにした。なお、A4までの掲示物はすべてKeynoteを使ってデザインし、A3サイズが必要なものだけPagesを使って別途作成した。 見出しは、目立つように角丸長方形を背景にしてヒラギノ角ゴシックW8の白文字で表示させた。本文のフォン

こんにちは、THE GUILDの @goando です。 私はTHE GUILDの中でもデータを扱う仕事を中心に活動しており、「UXの改善をデータでサポートする」をミッションに取り組んでいます。 ざっくり言うと、THE GUILDのクライアント企業が運営するサービスのログを分析してユーザーの行動傾向からUXの改善点を見つけ出したり、マーケットの市場リサーチを通じてサービスの戦略の策定を支援したり、と言った内容です。 こうした活動を通じて、データ分析の結果をグラフ等のレポートに落とし込むという事を数多く行ってきました。 試行錯誤を繰り返しつつ、データをどのようなデザインで視覚化するとメッセージが伝わりやすいのか、逆にどういう点に気をつけないと誤解を与えやすいのか、といったノウハウを少しずつ蓄積してきました。 データ分析を台無しにするダメグラフかく言う私もかつて、そのグラフから何が言いたいのか

いま、自分のポートフォリオを英語/日本語どちらにも対応しようと思っていて、どのように切り替えるべきか、リサーチのためにいろんなサイトを見て回った。その時にこれは良い、これは避けたほうが良さそう、と気付いたことがある。 国旗を使うことによる問題 デザイン上のスペースの節約からか、あるいはグラフィカルに補助したいという理由からか、言語切替のUIで国旗を見かけることがある。 日本にいると「日本=日本語」と、国と言語が対応しているので気付きづらいのだけれど、世界はそういう風には出来ていない。例えば英語を提供する際に、どの国旗が相応しいのか考えてみよう。イギリス？アメリカ？英語を第一言語とする国はいくつもある。 決して国旗は言語を代表するものではないのだ。 また、提供する言語が多くなると、ごちゃごちゃして見づらいという問題も含んでいる。 ただし、言語の切り替えではなく、ECサイトなど提供するコンテン

昨日に書いたマーケティングトレース（マーケッターにとっての筋トレ）に関する記事が、たくさんの人に読んでもらえ、予想以上の反響を頂きました！ 今日からマーケティングトレースはnoteで公開していこうと思っています！ 一人でやるのも寂しいので、もし＃マーケティングトレースでnote書いてくれる人が出てきてくれたら泣いて喜びます。 ということで、本日のマーケティングトレースです。 本日のマーケティングトレース=JINSメガネのJINSが面白いサービスをスタートしていたので、マーケティング戦略とトレースしてみました。 マーケティングトレース（チャート） マーケティングトレース（言語化）@Newspicksこのサービスからわかるのは、JINSがブランドイメージとして強化したいのは、「ファッション性＝視力が良い人もかけたくなる状態をつくる」ことだとわかります。 競合である、メガネスーパーやゾフとの違い

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

はじめて iMacG3 を使った時、私はとても前向きな気持ちになった。説明書を読まなくても何をどうすればいいの分かったし、自分の思い描いた通りに動かすことができた。 道具は使う人の能力を拡張させると言うけれど、私はあの丸いマウスと一緒に、文章を書いたり、絵を描いたり、本当に何でも出来る気がしたのだ。 それは Mac だけではなかった。iPhone も、iPadも、Apple 製品はいつも私を高揚させた。なぜ私はこんなにも惹かれるのか。不思議に思いながらも、私は Apple 製品を追いかけてきた。 どうして？ ... 実はその秘密は既に明らかになっている。 それは、モードレスだからだ。 直感的だとか、シンプルだとか、一貫性があるとか、そういったものは表出された一部にすぎない。 この秘密は、 今から 9 年も前にインターネットに公開されたテキストにあっさり書かれている。ソシオメディアの上野学

ある日友人から「これ使ってみて」と、手渡されたのが『Oo（ワオ）』だった。一枚の手ぬぐいがスヌードのように輪っか状に縫い合わせてあり、両面異なる色のリバーシブルになっている。おろしたてはバリッと硬い手ぬぐいもあるが、肌ざわりが最初からふんわりとしてやわらかい。 「好きな色を」と言われてずいぶん迷った。結局カーキ×グリーンを選んだが、ピンク×ベージュも捨てがたい。両面の色が違う手ぬぐいを初めて見たが、色の組み合わせも洒落ている。私は旅には必ず手ぬぐい持参と決めていて、ハンカチとしてはもちろん、道中は首にまき、温泉では体を洗い、自転車に乗る時には帽子がわりに頭に巻いてしまう。ホテルで夜洗えば、翌朝には乾いてしまうところもいい。こうして予め輪っか状なら首に巻きやすいし、頭にもかぶりやすい。また色合わせがきれいなのでスカーフみたいに使える。ーーこれすごくいいかも。もともと手ぬぐい好きということもあ

今は和風デザイナーとしてホームページを中心に制作している私ですが、元々は旅行パンフレット制作会社の編集・ライターでした。 WEB業界に入って苦労したことは、上司からは『ダサい』クライアントからは『何か違う』と言われ続ける日々が続きました。 そんな日々から抜け出した様々な気付きを紹介していきます。 使うツールが違うDTPとWEBデザインではツールの使用方法やツールそのものが違ったりします。なので、WEBデザインを始める際にはどのツールをどういうタイミングで使うか整理する必要があります。 【DTP使用ツール例】 InDesign＆Illustrator：レイアウト Photoshop：写真加工と補正 Illustrator：素材作成 【WEBデザイン使用ツール例】 Photoshop：レイアウトと写真加工補正 Illustrator：ロゴやイラスト作成 ※元々印刷会社でWEBを始めた会社ではレ

専門教育やだれかに師事することなく、独学でやってきたなかで参考になった教本、後輩に読んでもらいたい、読んでもらって好評だった本をまとめました。 専門胸臆を受けていない、美大出ではないというのがキャリアのはじめではコンプレックスでもありました（今はほとんどないですが） 独学で進めていくと、どこかでツケを払うときが来ます笑 そんなときにお世話になった本たちです。 ノンデザイナーズ・デザインブック [第4版] 『この本がデザイン学校の4年間の代わりになる、と言うつもりはありません。また、この小さな本を読めば、自動的に優れたデザイナーになれる、と言うつもりもありません。しかし、あなたがページを見る目は確実に変わるでしょう。この本の基本原則に従えば、あなたの作品が、もっとプロらしく、組織化され、一体化され、おもしろくなることを保証します。』(著者「まえがき」より)定番の定番。 ノンデザイナーズとある

1203本 思想を持ったお店をつくったり、運営、デザインをしているひとやその感想などの記事をまとめるマガジンです。

はじめに若手のUIデザイナーから「使いやすいアプリをデザインするために認知心理学を勉強したい。どんな本を読んだらいいですか？」と相談を受けたので、いくつか紹介してみます。ちょうど、大学入試センター試験（国語）で「デザイン」や「アフォーダンス」が取り上げられたこともあり、このタイミングで書いてみることにしました。 認知心理学の学問分野は広大ですし、僕は認知心理学者ではありませんので、あくまでも、１）デザイナー向けに、２）仕事に役に立つ、３）入門書、 という観点で選びました（前半の入門編）。 （僕自身は、多摩美術大学の大学院生の時に、須永剛司教授（現・東京藝大）の研究室で、インタフェース・デザインの実践研究をしながら、文献や論文、ゼミの輪読、学会や勉強会などを通じて、認知科学／認知心理学を学び、それがその後のインタラクション研究に続いていきます。） 後半の中級〜上級編には名前がよく出てくる有名

長年の謎がまたひとつ解けてしまいました。 今までの僕なら、特大3Dプリントしたロゴで「これが成果だ！」と相手を殴り倒していたのですが、もうその必要は無くなりました。 なぜなら、mamariのこの記事のおかげで、ひとつの答えが見つかったからです。 ロゴはエモさの結晶、つまりCrystal of Emo.何を言っているかわからないでしょう。僕もわからないです。順を追って説明させてください。 まず、ロゴはサービスの存在意義の表明です。 最初に「僕たちはこういう価値をお客さんに提供しよう」「この価値の実現のために僕たちは毎日働くんだ」という想いがあり、そのエッセンスをひとつの形として表現したものがロゴになります。 アウトプットよりもプロセスが大事で、たとえ形がつたなくても、そこに想いがあることが重要です。 そうしてできた想いの詰まったロゴが、アプリやサイトに表示され、オフィスや名刺に刻まれる時点で

小さいですが、重要な変更のお知らせ。 noteの「スキ」アイコンが、スターからハートに変更されました。 これはnote全体のマナーを、モバイルの標準に合わせていく方針の一環です。 一般的なモバイルアプリでのマナー スター = 評価 ハート = ライク, お気に入り, リコメンド なぜ標準マナーに合わせる必要があるのか？ サービスが標準マナーに従うことで、ユーザーは直感的に操作できるようになります。学習することが少なくなるので、認知的な負担が軽減されるわけです。結果、ユーザーはスムーズにサービスを使えるようになり、継続率の上昇が期待されます。 今回の変更は、そのための小さな一歩です。今後、noteの中で変にオリジナリティが必要のない部分は、積極的にスタンダードに寄せていきます（その分、真に重要な部分にオリジナリティをつぎ込みます）。 短期的には軽微な混乱が発生するかもしれません。すぐになれる

こんにちは、保井崇志 @_tuck4 です。 「フォトグラファー」ほど誰でもかんたんになれてしまう職業って他にないんじゃないでしょうか。 以前、医学生の友人と話していてビックリしたんですけど、国内の大学医学部は6年制なんですね。さらに卒業しても研修医の期間が2年間あるので、「私は医者です」といえるそのスタート地点まで、最低8年間あるわけです。 お医者さんと比べるのもあれですけど、「私はフォトグラファーです」というのは誰でも、今すぐにでもいえてしまいます。機材に関しても、例えばじぶんは富士フイルムのミラーレスカメラで全ての仕事の撮影をこなしていますし、昔の商業カメラマンほど高いスペックを求められることもありません。 誰もがフォトグラファーになれる時代。多くの才能がこの職業に集まってくるなか、まがりなりにも5年間フリーランスのフォトグラファーとして活動してきました。 そこで今回は「フリーランス

本記事は、DMM.com #1 Advent Calendar 201725日目の記事です。 昨日は@y-ohgiさんCloudFormationのススメという記事でした。 開発チームで行ったデザインスプリントで失敗したこと、そこで学んだことについて、つらつらと書き留めておきます。 所属しているチームについて チームが結成されたときは、UXに対する知見や、サービスを考える経験を持っているメンバーがほぼ皆無でした。 こうした背景もあり、サービスの仮説を検証するために制作したMVPと、その検証のフローの中で、様々な失敗を重ねました。 ※MVP：実用最小限の製品 / minimum viable product ▼チームの構成と環境 ・プロダクトオーナー１人、スクラムマスター１人 ・開発チーム：エンジニア5人、デザイナー１人（私） ・相談先として社内のUX専門チームに週1程のペースで打ち合わせ

この読み物は「富士そば Advent Calendar 2017」24日目の聖なる夜に捧げられた供物っぽい何かです。 --- キリンジの堀込兄弟が自分たちの出身地について歌ったとされる「エイリアンズ」という曲をご存知だろうか。少し前にTVCMで頻繁に流れ、リバイバルした向きもあるようだ。 私は彼らと同じ埼玉のベッドタウンで幼少から成人まで、いわゆる多感な時期を過ごした。同郷である。歌詞に出てくる"バイパス"も"公団"も実家のすぐそばにあった。 何より"この星のこの僻地"というフレーズが自分としてはかなりしっくり来る。「ここはいわば本当の僻地だな」と10代の頃、実際よく思っていた。そんなところも重なる。 まあ、どこにでもある何の変哲もない近代日本の郊外風景を、見事に叙情的かつ普遍的に表現した名曲であることだけは間違いない。 現実には歌のようなロマンティックな感覚を覚えたことはほとんどないが、