サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
hajipion.com
2018年12月1日~2日、東京ミッドタウン日比谷にてデザインシップというイベントを開催しまして、当日はハッシュタグ #Designship2018 が日本3位になるくらい大盛況でした!! せっかくなので、ひとりのデザイナーが1000人規模のカンファレンスを思いついてからどうやって開催まで漕ぎ着けたのかを、超ダッシュで振り返ります! 2018年2月〜4月:着想〜登記 着想 デザインシップのコンセプトは「業界を超えたデザインカンファレンス」ですが、最初はこんな思いつきのメッセージから始まります。 (メッセージの相手はデザインシップ理事の細見) IT業界では有名な公募トーク型技術カンファレンス「iOSDC」「DroidKaigi」のデザイン版ほしいよね、というモチベーションから始まっていることが分かりますが、この後もメッセージのやりとりは続き、自分の想いが整理されると、 「もっと現場のデザイナ
家の鍵ってマジで失くしませんか? 私事ですが、僕はよくモノを失くす人間で、パスモなんて月1で失くすし、前職でも社員証とか社用携帯とか失くしまくって始末書めっちゃ書いたのがいい思い出です。 どうりで1回も昇給しなかったわけだ。 この前順調に今年に入って2回目の鍵の紛失をした僕は、ついに鍵にMAMORIOという忘れ物防止タグをつけました。 MAMORIO S マモリオ エス Black&Black 世界最軽・最小・最薄クラスの紛失防止タグ/Bluetooth/ 逆に今までなんでつけなかったかというと「鍵とあたってカチカチする」からで、というかそもそもなんでそんなに鍵を失くすのかというと、 カバンに鍵をいれると毎回出し入れがめんどくさいから鍵はポケットに入れる ポケットに入れると他のスマホとかの出し入れの際に引っかかってよく落ちる コートとかをハンガーにかけるクセがなくて、雑にポイと置いてしまう
昨日炎上してましたね〜 ≫ 投げ銭サービス「Osushi」、サービス開始するやいなやオモチャにされてしまう セキュリティが甘いとかはともかく、うちの会社の何人かが「なんで違法なん?paymoとKyashとpolcaと何がちがうの?」とつぶやいていて、 たしかにどれも体験としては「誰かにお金を送れる」サービスだし、普通は違い分からんよなぁと思いながらその場でおこなった説明を、ちょっと肉付けしてここに記しました。 ちなみに正確にいうと現時点では「アウトっぽい」としか言えないです。 今まで世の中の誰も思いつかなかった、よっぽど革命的な法律の穴をかいくぐる仕組みを思いついたのかもしれないじゃないですか。 推定無罪!!!!!! 公式の答えもないので断言はできません。僕も大人なので。 (昨日で26歳になりました) Osushiとはなにか? Osushi(http://osushi.love/) Osu
こんにちは。大学生のとき彼女に1週間でフラれて、何がダメだったのかきいたら 「告白がうますぎて付き合っちゃったけど、ホントは生理的に無理だった」 と言われた広野です。 僕以外全員ブサイクであれ。 さて、今回は「どんなに勝ち目がなくても絶対にウンと言わせる告白の方法」 いやいや、「超心に刺さってイヤでも印象に残るプレゼンの方法」です。 自分は学生の頃から今の会社(FOLIO)を創業するまで、ハッカソンやアプリコンテストで30を超える賞を取ってきました。 面白いアイデアやそれを実現するテクノロジーはもちろんですが、僕が最もこだわりを持っていたのは「伝え方(=プレゼンテーション)」です。 最近会社のフェーズとしても水面下ではなくなったので(2年間水面下だった話はこちら)、わりと登壇の依頼も来るようになり、ありがたいことに今年出させていただいたUI Crunchに関しては大変評判よく、今になっても
ついにここまで来た。 1年と10ヶ月。 僕と代表の甲斐が出会ってから、ちょうどそのくらいだ。 出会ってから3ヶ月で共にFOLIOという会社を創業し、当時23歳の僕が、もう25歳になった。 自分でいうのもなんだけど、若者の2年は非常に貴重な時間だ。 その2年を、僕はたかが1つのサービスの開発につぎ込んだ。 リーンスタートアップだのアジャイル開発だのMVPだの、最低限のクオリティのプロダクトをだしてから実際にお客様の声をききながら改善していくことが「正」とされる近年の中で、はたから見れば愚かなスタートアップであることは間違いない。 正直僕だってキツかった。 今まで僕は、様々なハッカソンやアプリコンテストにでたり、プライベートでもとりあえず思いつきのアイデアはほぼすべてつくってきた。(参考:プロフィール>ポートフォリオ) おかげで大学生~社会人にかけては、同じ2年間で数えると30を超える賞をもら
※2018年1月10日追記 未だにこの記事を参考にしてくださる方が多いのだけれども、CASHは2017年8月24日に再開したときから「即時買い取りサービス」にピボットというか振り切ったかたちで運営しており、キャンセル手数料も0円になったので、もはや質屋アプリじゃない。本記事の解説はあくまでもファーストリリース時点の話だということを念頭にお読みいただきたい。 ———————————- 昨日、BANKという会社から「CASH」というサービスがリリースされた。 (ちなみにBANKの社長は、かのSTORES.jpをつくりスタートトゥデイに会社を売却した光本さん) 質屋というビジネスを分かってない人にとっては、CASHはどうやら「らくちん買い取りサービス」だと思ってしまうようで、まぁ最近のメルカリとかの延長でそういうのできたんだ〜っつって使ってみる人もいるんだろう。 でも違うんだ、このサービスは恐ろ
どちらかを使ったことがあるという人は多いでしょう、このふたつ。 「nth-child」と「nth-of-type」。 ふたつとも「n番目の要素」を指定する擬似クラスです。 たとえば↓こんなコードがあったとしたら、 ブラウザではこう表示されます。 nth-of-typeでも同様。 じゃあそのふたつの違いってなんなのか! 今から解明します。 端的に言うと「要素の数え方」 以下のようなソースがあるとします。 oddは「奇数」を意味するので、ここでは奇数番目の子となるp要素が赤くなります。 これをnth-of-typeで書くと…… なんと、キャベツとトマトの代わりにピーマンが赤くなりました! 赤ピーマンです!(よくわからない) なぜこうなったかというと、nth-of-typeはその名の通り「type」つまり「型」を見ており、順番を数えるときにpタグしか見ない!からなんですね。 たしかに6個あるpタ
HTML5で定義が変わったタグ一覧! コピーライトは <address> じゃなくて <small> に…… 2014.10.31 HTML5になり、追加されたタグや廃止されたタグだけでなく、定義が変わったタグもちらほらあります。 今回はそれをまとめてみました! それがこちら↓ <s> や <b> など、表示としては変わらずとも「意味的」であることを重要視するHTML5らしい定義になりましたね。 特に注意すべきは、よくフッターにつけるコピーライトは、 <address> ではなく <small> になったという点です。 あまりにも感覚的じゃないので個人的にはちょっとどうかと思いますが、今後は気をつけなければなりませんね。
paymo、Kyash、LINE Pay、Yahoo!ウォレットなど、 最近かなりの盛り上がりをみせている個人間送金アプリ。 以前書いた記事(ここらで世界一わかりやすく「FinTechとは何か」を説明しよう。)でいうところの「お金を送る」に当たるこの領域だけれども、特にpaymoとKyashはやり方が特徴的で、日本のFinTech時代をつくっている革命感があり、大変面白い。 実際それらのサービスを比べてみると、個人間送金とひとくちに言っても取得している免許や法における立ち位置が全く違うので、それ故サービスの内容も同じ体験ではない。 では一体、どこがどう違って、それはなぜそうなっているのか。 新聞やらで説明してるのはいくつか見たけれども、なんか難しい言葉やふわふわしたことばかりで意味不明だったので、天邪鬼な僕は一旦、それぞれの個人間送金アプリの体験においてデメリットだけをまとめてみた。 この
釣りタイトルですみません。 でもね、世に言う「UXマン」っているじゃないですか。 いかにも自分は上流工程だと言わんばかりに様々なフレームワークや聞こえはいい理論を振りかざしているにも関わらず、自分では手を動かしてモノをつくらないし、いざつくってもらったらアチャーなアウトプットだす人たち。 そもそも「UXデザイン」には色んな解釈があったところに、“つくってなんぼ”のWeb業界にそういう人たちが少なからずいる(し、えてしてなぜかデカイ顔をしている)もんだから、もはやUXデザイナーという職そのものが胡散臭いと思われていることが多いんですよね。 前職の話になりますが、当初「UX推進部」という部署に属していたので、勤務外にもUX系の勉強会にはたくさん参加してみたけれど、ほとんどくっそ当たり前のことしか言ってない講演とか、Sketchはいいぞ〜って永遠に言ってるだけの集まりとか、本当に参加する価値がな
2016年も半ばを迎えようとしていますが、いまだに多くのWebサイトで©表記を見かけますね。 まだコピーライトで消耗してんの?って感じです。 後述のように、コピーライト表記は2016年現在「そもそも不要」なんですが、一応「正しい書き方」というのも存在するので、興味のある方は流し見でどうぞ。 1. そもそもコピーライト表記なんていらない? 2016年現在、日本を含めほぼすべての国が「ベルヌ条約」という条約に加盟しています。 その条約によれば、著作物を創作した時点で著作権は発生するので、もはや昔のようにWebサイト上でわざわざ著作権表記(©)をせずともいいわけです。 それでもいまだに©表記を見るのは、古い時代の慣習(昔は©を書かなきゃいけなかった)がそのまま残ってしまってるか、もしくは無用なトラブルを避けるために「不安だからとりあえず書いてる」といったところでしょうか。 たしかに、すべての国が
そこの幅広げたいなんて誰も言ってねえよ!! たとえばこういう状況ですね。 boxクラスの幅に400pxを指定してあります。 文字に余裕がないので、paddingを追加しようとしたら… 余裕はできたけど、幅が400pxを超えてしまいました! paddingは中の要素を広げるので、左と右に10pxずつ広がって、結果的に420pxとなってしまうのです。 さらにさらに、borderでも同じようなことが起こります。 外側にborderがつく形になり、boxクラスの幅は更に広がりました! もうこの時点で440pxです。 解決策 これを解決するため、今まではもとの幅を360pxに修正するしかなかったのですが、CSS3で追加された「box-sizing」プロパティを使えば、ささっと事件解決です! 値は「border-box」を指定します。 すると…… (おさまったー!) デフォルトの値 「box-sizi
デザインは感性によるものではなく極めて論理的な作業であることは言い尽くされているけれど、ことUI(ユーザー・インターフェース)にかけては根拠をもってデザインすることが第一。 とはいえ簡単にそれができていれば苦労しない。 そこで弊社FOLIOでは、UIデザインをするとき「デザイン実況」と「分報」を合わせた取り組みを実践している。 これにより、論理的にデザインせざるをえない状況をつくりあげることができる。 それはデザイナーのための一種のトレーニングにもなりうるし、チーム開発において後述のように有効活用されうるだろうと考え、今回具体例を交えながら紹介する。 デザイン実況とは 名前の通り、デザイン作業をしながらその様子を実況すること。 板橋聡さんによるツイッターでのデザイン実況が有名。 参考:何かと話題のデザイナー板橋聡氏の実況Webデザインまとめ【第三弾】 (↑デザインをこれから勉強するという方
ゴミみたいな「アイデア」の種を、勝てる「企画」に落としこむ方法 ── Hack Day Japan 2016優勝記 2016.02.21 こんにちは。 先日ヤフー主催の24時間ハッカソン「Hack Day Japan 2016」でグランプリをもらい、受賞コメントで「24年+1日でつくりあげたものだと思ってます」なんつー気取ったクソコメントを発したあげく特に話題にもならなかった広野です。 めざましテレビでも放映されたのは長々としゃべった僕の取材コメントではなく我がチームのエンジニアによるアプリの説明でしたね。 さておき、今回はつくったものは「グルメスパイ」というもの。 スマホを一瞬料理にかざすだけで写真を撮ってくれて、さらに自動で美味しそうに加工してくれて、ついでにツイッターに勝手に投稿してくれるアプリです。 仕組みとかはこのページに。 グランプリ受賞理由は以下の3つ。 ① 課題が明確で分か
広野 萌(ひろの はじめ) 一般社団法人デザインシップ代表。 早稲田大学卒業後、ヤフー株式会社入社。 2015年、オンライン証券「FOLIO」を共同創業。Chief Design Officerに就任。 2018年、一般社団法人デザインシップ設立。代表理事に就任。 法律・医療・自動運転・エンタメ・ARなど幅広い業界の新規事業立ち上げ・デザインを支援。 ラジオ番組「ブレインストーミング」隔日更新中。 2014年 早稲田大学で現代文学・現代思想を中心に研究し、論文「マラルメの謀反 ─リヒャルト・ワーグナーという神話の解体─」にてフランス象徴主義文学の定説を覆す解釈を立論。 日本最大級のハッカソン「Open Hack Day」最優秀賞受賞を経て、ヤフー株式会社へ入社。 主に新規事業・全社戦略の企画やアプリのUX推進に携わる。 在職中、UIに関する特許を3件出願。 同年にデザインコミュニティ De
最近どこもかしこも「フィンテックフィンテック」でうるせえ。 特にクリエーターからしたら、意識だけ高いビジネスマンのうさんくさい奴らが 「やっぱりこれからの時代はフィンテックだな!」 「フィンテック盛り上がってますね!」 やらをFacebookで申し上げていて、周りはいつの間にか勝手に盛り上がってるし、今さら「フィンテックって何?」なんて聞けないところまできてしまったようで、さてググッてはみるものの、どの記事も専門用語ばかりで意味不明。 フィンテックとか一生縁がないんだろうな〜! …という方のための記事です(笑) かくいう僕もそう思っていた一人ですが、ご縁で2016年よりフィンテックの領域にスタートアップとして優秀な仲間たちと起業することになったので、改めてうさんくさい「フィンテック」について勉強しなおしました。 思考の整理の意味も込め、多少簡略化してまとめておきます。 1. FinTech
チームで開発するときの神器 Gitというのは一人でサイトをつくるときには使われません。 チームでひとつのWebサイト・Webサービスをつくりあげよう、というときに初めて使われるものです。 では、Gitって何なのか。 一言でいいます。 複数人が一度に同じファイルをいじってても困らない方法です! そうです、「方法」です。 Gitは「プロジェクトのバージョン管理ツール」であるとよく言われますし、実際その通りで普通に考えて「ツール」なのですが、使う側からすると「管理する方法」といっても支障ないので、とりあえずGitっていうのはプロジェクト管理の「方法」であると考えて読み進めてみてください。 たとえばある日の10時に、はじぴょんがサーバ上のindex.htmlをダウンロードし、11時に修正が終わりアップロードしました。 しかし同日、10時30分に同じサーバ上のindex.htmlをダウンロードしたダ
二番手企業だけができる、一番手企業の殺し方。『マーケティング22の法則』で書かれている3つのこと 2015.09.27 マーケティングに携わる人ならほとんどの人が読んだであろう『売れるもマーケ 当たるもマーケ マーケティング22の法則』。 売れるもマーケ 当たるもマーケ―マーケティング22の法則 日本企業やアメリカ企業の実例も交えながらユニークに独自の(しかし普遍的な)マーケティング論を展開する本で、実際「マーケティングの教科書」といっている人もいるくらいの名著ですが、当然法則は22もあるわけで、読むのが結構たいへん。めんどい。 …という方のために、この本で言ってることを大きく3つにまとめました。 1. 一番手になれ 人の心を変えようとするのは無駄な行為である。 なので「他の商品より優っている」ことよりも「最初に入りこむ」ことの方が大切。 勝つためには参入の一番手でなければならない。 マー
“CliMix”──「漫画×音楽」の可能性。Music Hack Day Tokyo 2015に参加しました! 2015.08.25 先日、Music Hack Day Tokyo 2015 に参加してきました。 その名の通り、音楽系のハッカソン。 テーマは「あなたの考える『音楽の未来』」でした。 つくったもの 僕らのチームは「漫画×音楽」をコンセプトに、『CliMix』(クライミックス)というアプリをつくりました。 漫画の各シーンの雰囲気に合わせて最適な曲を流す、電子書籍アプリです。 クライマックスのシーンを壮大な音楽で盛り上げて、読書体験をもっと楽しくします。 最近のラノベはどんどん漫画化していると言われますが、じゃあ漫画もアニメのように振る舞っていいはずだ!という思いつきから作り始めました(笑) (漫画化していくラノベたち) 最終的には「漫画を読んでる最中に音楽が流れる」だけなので使
ダウンロード数を10倍にした最強ASOテクニック!App Store攻略のための「タイトル」「キーワード」etc…の作り方 2015.08.15 ASO(App Store最適化)という言葉を知っているでしょうか。 iTunes ConnectでiOSアプリを申請する際、「タイトル」「キーワード」「説明文」「スクリーンショット」を上手に構成して、App Storeにおいてアプリをより多くの人目に触れさせることです。 僕はもともとSEOを得意としてましたが、先日とある取引先からASO案件が回ってきたのでおそるおそるコンサルティングしたところ、あるアプリのダウンロード数が約10倍になりました。 マーケティング施策と重なったこともひとつの理由ですが、これはなかなかいい結果。 そこで今回は、実際にその件でも使ったASOのテクニックを簡単にまとめました。申請の際はぜひご参考にしてください。 1. タ
CSS3の魔力 CSS3が勧告されてからもう3年が経とうとしています。 新たに追加されたプロパティのおかげで、画像を使わずにグラデーションなどが表現できるだけでなく、JavaScriptやFlashでつくるしかなかったようなアニメーションもラクラク作れるようになりました。 今回はそのCSS3の魔力をつかって、斜めがけのリボンをつけたボックスをつくってみます。 これが完成形↓ この記事で得られるCSS3の知識は以下のとおり。 グラデーション (linear-gradient) 回転 (rotate) 移動 (translate) ボックスに影をつける (box-shadow) 文字に影をつける (text-shadow) 盛りだくさんですね!ではさっそく。 まずボックスをつくる htmlからつくります。こんな感じ↓ HTML5では<html>や<head>、<body>を省略できる(むしろ省
サルでも分かるOOCSS(オブジェクト指向CSS)。未だにidを使っている愚かなフロントエンジニアへ 2015.08.02 タイトル煽りすみません。idもidで使い方によっては大事です。。。 ただし実際のところ、CSSの設計でid(#)がかなり減ってるのをご存知でしょうか。近年のフロントエンドの流行ではidをちょいちょい使うよりも「めんどいから全部class(.)にしてしまおうぜ」っつー流れがあります。 ……とはいっても、「めんどいから」というのが唯一の理由なのではなく、まぁ色々理由はあるのですが、その中のひとつに「OOCSS(Object-Oriented CSS)の思想が普及してきたから」があって、今回はそのOOCSSについて どんなバカでも分かるように サワリをご紹介したいと思います。 よかったですね、OOCSSを知らなかった愚かなフロントエンジニアの皆さん! ご紹介したいと思います
革命的なサービスアイデアの出し方。「課題解決」な発想をするための3つのポイント 2015.05.07 サービスアイデア発想の基本は「課題解決」です。 「課題解決」のためのフレームワークというのはこの世にいくつか存在しますが、どちらかというと大企業の経営戦略で役立ちそうなフレームワークが多いし、小難しい…。 今回は主にWebやアプリで新しいサービスアイデアを出そうとしている方々のために、「課題解決」なアイデアを出すための3つのポイントをご紹介します。 「課題解決」なアイデアを出すための3つのポイント Objective – より本質的な課題はないか考えてみる Perspective – 別の人の視点から考えてみる Scope – 体験の期間を変えて考えてみる 1. Objective – より本質的な課題はないか考えてみる ある課題に対して、その課題を解決することが本当に正しいのか今一度考え
大規模デザインカンファレンス「デザインシップ」の着想から開会まで、超ダッシュで振り返る10ヶ月! #Designship2018
Webサービス・アプリのキャッチコピーの作り方! 実践すべき3つのテクニックと、絶対にやってはいけない3つのタブー 2015.05.04 Webサービスやアプリのランディングページにおいて、メインビジュアルにいれる一言は大変重要なものです。 そのキャッチコピーひとつで、訪れた人に「使いたい」と思わせられるかどうかが決まります。 では、そのプロダクトの魅力を伝えるための言葉はどうやってつくればいいのでしょうか。 今回は実際にWebサービス・アプリのキャッチコピーの例をみながら3つのテクニックをお伝えする一方で、反面教師としての例も交えながら「絶対にやってはいけない」3つのタブーも書いていきます! 0. キャッチコピーとタグライン 本題に入る前に、コピーの種類として「キャッチコピー」と「タグライン」の違いについて知っておかなければなりません。 キャッチコピー(キャッチフレーズ) 世に言うキャッ
2012年に仕様が策定され、今年2014年中には正式勧告される予定のHTML5。 まだ正式に勧告されてないとはいってももはやHTML5はWeb業界でコーディングするにあたって標準となっています。 そこで、もうそろそろなされる正式勧告の前に、HTML5のルールをおさらいしておきましょう! とっても省略できる! HTML4.01からの変更点としてまず言えるのは、コードの大部分が省略できること。 ムダで冗長な宣言や、わかりきった属性など、色々と省略できることが増えたのでひとつずつ見ていきましょう。 doctype宣言 doctype宣言は、どの文書型定義に従って記述しているかを示すものですが、この長ったらしいものはHTML4のdoctype宣言の一例です。 未だに多くのサイトがこのままになっています。 長ったらしいですね〜 これをHTML5ではこう書きます。 すっきりしました!
ユーザーがそのアプリの中で一番最初にふれる画面は、アイコンと同じくアプリの「第一印象」になると考えても間違いないくらい、大切な部分です。 だからこそ導入画面は、ユーザーの気持ちになって、ユーザーのことを考え、しっかりと設計しなければなりません。 今回はそんなアプリの導入画面によく使われる、4つの手法をご紹介します。 スプラッシュ まずはおそらく最も多くのアプリが採用しているスプラッシュという手法です。 ホームからアプリのアイコンをタップしたときに出る画面で、データローディングの時間稼ぎ、またはそのアプリをブランドとしてユーザーに認知させる目的で使われます。 たとえばツイッター公式クライアント。 アプリを起動したときの、この画面ですね。 みなさんご存知かと思いますが、ツイッターは少し特殊なスプラッシュで、 こんな風にどんどん鳥がせまってきて背景にコンテンツがあるという、面白いスプラッシュを導
ネーミングセンスなんていらない!? サービス・アプリの名前の決め方 + 決めるときの3つのコツ 2014.10.29 どんなに良いウェブサービスやアプリを思いついたり企画しても、「名前をつける」のはそれと同じくらい、もしくはそれ以上に難しいものです。 その企画内容を一言で表す言葉を探さなければなりませんから、それはそれは難しい旅になるでしょう。 かくいう僕も、毎回ネーミングにはチームの皆を巻き込んでかなりの時間を費やしています。 今回はそんなサービスやアプリの「名前の決め方」と、「名前を決めるときのコツ」をご紹介します。 「ネーミングセンスが絶望的」という自覚がある人も、この方法を使うだけでいい名前が生まれるかもしれませんよ(^-^)/ 1.キーワードをいじってみる まず、そのサービス・アプリのキーワードを書き出して英語にしてみます。 コード系のサービスだったらcode、画像系だったらim
ステータスバーをつけるか否か アプリをつくっているとき、これはデザイン的にステータスバーを消したいな〜ということがあるかと思います。 たとえばこんな感じのときとか。 (ステータスバーあると上の方がごちゃごちゃしてアプリの雰囲気と合わない) Xcode6はデフォルトでステータスバーがつくようになっていますが、コードを一切書かずにこれを非表示にしてみましょう。 General から Hide status bar にチェック! まずはチェックボックスを入れるだけの簡単なこと。 プロジェクトの設定(左のリストの一番上にあるやつ)から “General” のタブを押し、 “▼Deployment Info” 欄から “Hide status bar” にチェックを入れます。 直訳して「ステータスバーを隠す」……そのままの意味ですね(笑) しかしこれにチェックを入れてもまだステータスバーは消えません
次のページ
このページを最初にブックマークしてみませんか?
『hajipion.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く