SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
Webサービスを 
デザインするって 
どういうこと? 
の場合 
Bracket, Inc. Kanako Kawahara 
2014.3.14 スタートアップの女性デザイナーが登壇!Designer's Meetup★
自己紹介と 
これまでの経歴
河原 香奈子 @kanakt 
2013.05- 
Bracket, Inc. 
デザインテンプレートの本、出しました。 
WordPressで作る 
魅せるWebサイトのデザインコレクション(マイナビ)
・多摩美 情報デザイン学科卒 
・前職は少人数のWeb制作会社 
・受託中心だったが、自社サービスも 
 やっており、そっちの方が面白かった 
・20代最後のチャレンジ!
Webサービスをデザインするってどういうこと?
BRACKET 
受託ではなく自社サービスのデザインを 
やってみたいと思っていたところ、 
ローンチ時から注目していた 
STORES.jpのデザイナー募集があった。 
コンセプトと世界観が好きだった。
BRACKET 
特にスタートアップで働きたい!という 
わけではなかったが、面白そうな会社を 
探していたら、結果的にそうなった。 
話を聞いてみた(Wantedly)ところ 
やっぱり面白そうだったので、入社した。
Webサービスをデザインするってどういうこと?
最短2分で、驚くほど簡単に 
オンラインストアがつくれる
Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?
STORES. jp 
主にやっていること 
・新機能、既存機能の見直し、改善など 
・マーケットプレイスの制作 
・スマホ強化
STORES. jp 
地味にやっていること 
・リリース用ビジュアル 
・メルマガ 
・PRアイテム
STORES. jp× 
MARKET 
「売れる」場所をつくる! 
マーケットプレイスを拡大中!
Webサービスをデザインするってどういうこと?
基本的に1つのサービスですが 
意外と手広くやっています。
デザイナーの役割 
STORES.jpの場合
UI/UX. . .?
DESIGN 
・ユーザーが操作する部分のUI/UX設計 
・明快なビジュアルデザイン 
・親しみやすいテキスト 
・画面外のPRアイテム etc...
DESIGN 
サービスのブランディングに 
関わるものは基本すべてデザイン。
DESIGNER 
様々なアウトプットを介して、 
サービスのビジョンやコンセプトを 
まるっと可視化し、世界観をつくる人。
DESIGNER 
デザイナーは、具体的に目に見えて 
触れられるものをつくれるので、 
ユーザーとの距離が近い。
DESIGNER 
最終的なアウトプットに 
責任を持つのがデザイナーの役割。 
設計から表現までが「デザイン」。
DESIGNER 
考え方は様々かと思いますが、 
STORES.jpでは、デザイナーの 
役割をこのように考えています。
個人的に心掛けて 
いること4つ
1 
デザインを広く捉える 
自分の領分を限定しない。 
サービスに関わる全ての事柄において 
デザイナーの視点を持って向き合うこと。
世界観を大切にする2 
「こんなに簡単なの?」という驚きや 
ワクワク感 = STORES.jpの世界観。 
世界観に沿った設計・表現をすること。
3 
アウトプットに執着する 
ひとりよがりのこだわりではなく、 
サービスの信頼度を上げるという意思で 
アウトプットの質に執着すること。
4 
エンジニアと仲良くする 
デザインの意図をきちんと伝える。 
積極的にコミュニケーションを取り 
進め方などは臨機応変に対応すること。
1 デザインを広く捉える 
2 世界観を大切にする 
3 アウトプットに執着する 
4 エンジニアと仲良くする
スタートアップ 
ならではのこと
STARTUP 
リソースが限られている(1人)ため 
今の状況で何をすると一番効果的なのか、 
ちゃんと成長が見込める部分に力を注ぐ 
ことができてるかどうかは意識している。
STARTUP 
裁量、責任、可能性が 
大きい
STARTUP 
STORES.jpの成長と一緒に、 
自分自身もデザイナーとして、 
大きく成長したいと思っています。
STARTUP 
Webサービスのデザイナーは 
まだまだ少ないので、 
大きなチャンスがあるはず!!
STARTUP 
ということで
WANTED! ! 
ブラケットではデザイナーを募集しています! 
一緒にSTORES.jpをつくりましょう!! 
渋谷 / オフィスがおしゃれ / おやつとレッドブル無料

Contenu connexe

Tendances

優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法Junichi Izumi
 
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)Kenta Nakamura
 
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)witstudio
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランSasaki Kouhei
 
20151011_出版記念講演:クオリティとスキルの話
20151011_出版記念講演:クオリティとスキルの話20151011_出版記念講演:クオリティとスキルの話
20151011_出版記念講演:クオリティとスキルの話Kenta Nakamura
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00Yusuke Kojima
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールINFOBAHN.inc(株式会社インフォバーン)
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングeriko yamada
 
初心者のためのUser Centered Designの考え方(入門編)
初心者のためのUser Centered Designの考え方(入門編)初心者のためのUser Centered Designの考え方(入門編)
初心者のためのUser Centered Designの考え方(入門編)Katsumi Tazuke
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事masaki sukeda
 
Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座本間 和城
 
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)Concent, Inc.
 
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221Yusuke Kojima
 
【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編本間 和城
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-techmasaaki komori
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターtake-it
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎Hiroyuki Ogawa
 

Tendances (19)

優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
 
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
20151011_出版記念講演:クオリティとスキルの話
20151011_出版記念講演:クオリティとスキルの話20151011_出版記念講演:クオリティとスキルの話
20151011_出版記念講演:クオリティとスキルの話
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
 
初心者のためのUser Centered Designの考え方(入門編)
初心者のためのUser Centered Designの考え方(入門編)初心者のためのUser Centered Designの考え方(入門編)
初心者のためのUser Centered Designの考え方(入門編)
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
 
Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
 
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
 
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
 
20150404 講演資料
20150404 講演資料20150404 講演資料
20150404 講演資料
 
【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 

Similaire à Webサービスをデザインするってどういうこと?

Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Yasuhito Yabe
 
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)Kazuhiro Matsuda
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考えるkenji goto
 
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法Yoshiko Sarakai
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之schoowebcampus
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない ZYasufumi Nishiyama
 
20101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok420101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok4Chiaki Hayashi
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェスrie05
 
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築Yasushi Taki
 
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話典子 松本
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方kenji goto
 
ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかたShuhei Iitsuka
 
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜Saori Okayama
 
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すセンスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すTomoe Sawai
 
プログラミングに恋する方法
プログラミングに恋する方法プログラミングに恋する方法
プログラミングに恋する方法Reimi Kuramochi Chiba
 
Wiz_branding
Wiz_brandingWiz_branding
Wiz_brandingWizDesign
 
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズお客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズCherry Pie Web
 
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Adobe Illustratorによる WordPressテーマ作成ワークフローAdobe Illustratorによる WordPressテーマ作成ワークフロー
Adobe Illustratorによる WordPressテーマ作成ワークフローCherry Pie Web
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦sogawaminoru
 

Similaire à Webサービスをデザインするってどういうこと? (20)

Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)
 
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
 
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
 
20101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok420101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok4
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェス
 
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築
 
Lightning Talk
Lightning TalkLightning Talk
Lightning Talk
 
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 
ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかた
 
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
 
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すセンスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
 
プログラミングに恋する方法
プログラミングに恋する方法プログラミングに恋する方法
プログラミングに恋する方法
 
Wiz_branding
Wiz_brandingWiz_branding
Wiz_branding
 
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズお客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
 
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Adobe Illustratorによる WordPressテーマ作成ワークフローAdobe Illustratorによる WordPressテーマ作成ワークフロー
Adobe Illustratorによる WordPressテーマ作成ワークフロー
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
 

Webサービスをデザインするってどういうこと?