SlideShare a Scribd company logo
有限会社アップルップル 今井理紗子
社会人になって振り返る
グランプリを獲った
Webアプリの作り方
自己紹介
有限会社アップルップル
今井 理紗子
名古屋市立大学芸術工学部デザイン情報学科 卒業
2013年4月∼
2014年4月∼ 今年の4月から
Webデザイナーとして
働き始めました!
目次
✦ NEXT COMMUNICATION AWARDについて
✦「事前調査」編
✦「既存アプリの収集と分析」編
✦「対象施設の調査」編
✦ 社会人の視点で振り返る
東海地方の学生向けコンペティション
「NEXT COMMUNICATION AWARD」
挑戦しました!
これを作りました
「事前調査」編
敵を知り己を知れば百戦危うからず!
「事前調査」編
はじめに、自分の得意・不得意を整理しました
Illustrator
HTML5/CSS3
CMS
JavaScript
UI/UX
権利関係の知識
イラストが描ける
なんとか動くものが
書ける
WordPressと
a-blog cms
「事前調査」編
はじめに、自分の得意・不得意を整理しました
Illustrator
HTML5/CSS3
CMS
JavaScript
UI/UX
権利関係の知識
イラストが描ける
なんとか動くものが
書ける
WordPressと
a-blog cms
勉強はしてるけど
実践できてない
ライセンスと
著作権の知識有り
コピペ!
「事前調査」編
コンペについての情報を収集・整理
✦出場校は情報系がほとんど
✦過去にUXが評価された例あり
✦審査員はWebの専門家
 だけじゃない ビジュアル面
UI/UX
なら勝ち目がある?
プロの技を盗め!
「既存アプリの収集・分析」編
「収集・分析」編
既存アプリの分析をしてみよう!
ネイティブアプリ Webアプリ
✦東京国立博物館
✦サンシャイン水族館
✦札幌まるやま動物園
✦JR大阪駅
✦美濃市市街地
✦鳥取県
✦伊豆市
✦山梨県
アプリを使う人たちの観察をしてみよう
「対象施設の調査」編
「対象の調査」編
スタッフの方へのインタビュー
✦展示テーマをもっとアピールしたい!
✦順路はあえて設定していないよ
✦「カイオーの水族館日記」など
 更新頻度の高いコンテンツ 観覧ルート
更新システム
がキーワード
「対象の調査」編
来館者の行動を観察
✦館内で携帯を使うのは20~30代女性
✦親子連れはカメラ
✦デフォルトのカメラアプリより
 SNSの使用率大
✦通信環境に注意が必要
SNS連携
非同期遷移
がキーワード
「対象の調査」編
施設側スタッフ
来館者
SNS上の「友達」
コンテンツと
サービス
SNS
こんなコミュニケーションを提案しました
ワークフローとアウトプットについて
社会人の視点で
振り返ってみる
振り返って反省
✦調査に時間がかかりすぎ!
✦一人で制作する限界
✦スケジューリングの課題
調査の前に仮説を立てる重要性
弱点をカバーする工夫が必要
最低限の時間で
最大限の成果を出す努力
ご清聴ありがとうございました!
@i_mairy
r1sak0
今回の発表内容は
ブログにもまとめています
http://4kakudez.com/

More Related Content

Similar to 社会人になって振り返る グランプリを穫ったWebアプリの作り方

もしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったらもしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったら
Chloe Takahashi
 
人が人を呼ぶアプリづくりの事例
人が人を呼ぶアプリづくりの事例人が人を呼ぶアプリづくりの事例
人が人を呼ぶアプリづくりの事例
leverages_event
 
スマートフォンアプリ開発におけるディレクション
スマートフォンアプリ開発におけるディレクションスマートフォンアプリ開発におけるディレクション
スマートフォンアプリ開発におけるディレクション
GIG inc.
 
デザインに騙されないデザイン
デザインに騙されないデザインデザインに騙されないデザイン
デザインに騙されないデザインGyoda Nawoshi
 
A06  角田研究室6 長谷川和紀
A06  角田研究室6 長谷川和紀A06  角田研究室6 長谷川和紀
A06  角田研究室6 長谷川和紀
aomorisix
 
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
真一 藤川
 
DEMODAY 6th
DEMODAY 6thDEMODAY 6th
Rainbow appsshonanseminar20121222
Rainbow appsshonanseminar20121222Rainbow appsshonanseminar20121222
Rainbow appsshonanseminar20121222
Haruyoshi Kuwamura
 
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
Kunihiro Okamura
 
フリーランサーの2014年振り返り
フリーランサーの2014年振り返りフリーランサーの2014年振り返り
フリーランサーの2014年振り返り
Kiharu Sasaki
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
Takeshiro Kani
 
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
Masayuki KaToH
 
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えますエンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
Yuka Masaki
 
App inventor for bussiness
App inventor for bussinessApp inventor for bussiness
App inventor for bussiness
Takeaki Tada
 
リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~
リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~
リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~
Kazuyoshi Motoki
 
アプリプロモーションのこれまでとこれから(2014/7/4)
アプリプロモーションのこれまでとこれから(2014/7/4)アプリプロモーションのこれまでとこれから(2014/7/4)
アプリプロモーションのこれまでとこれから(2014/7/4)
Adinnovation Inc.
 
情報の『見える化』ってなぜ大事?どうやるの? ~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』
情報の『見える化』ってなぜ大事?どうやるの?~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』情報の『見える化』ってなぜ大事?どうやるの?~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』
情報の『見える化』ってなぜ大事?どうやるの? ~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』
Azumi Wada
 
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
Yuka Masaki
 

Similar to 社会人になって振り返る グランプリを穫ったWebアプリの作り方 (20)

もしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったらもしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったら
 
人が人を呼ぶアプリづくりの事例
人が人を呼ぶアプリづくりの事例人が人を呼ぶアプリづくりの事例
人が人を呼ぶアプリづくりの事例
 
Webゼミ後期発表
Webゼミ後期発表Webゼミ後期発表
Webゼミ後期発表
 
スマートフォンアプリ開発におけるディレクション
スマートフォンアプリ開発におけるディレクションスマートフォンアプリ開発におけるディレクション
スマートフォンアプリ開発におけるディレクション
 
デザインに騙されないデザイン
デザインに騙されないデザインデザインに騙されないデザイン
デザインに騙されないデザイン
 
A06  角田研究室6 長谷川和紀
A06  角田研究室6 長谷川和紀A06  角田研究室6 長谷川和紀
A06  角田研究室6 長谷川和紀
 
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
 
DEMODAY 6th
DEMODAY 6thDEMODAY 6th
DEMODAY 6th
 
Rainbow appsshonanseminar20121222
Rainbow appsshonanseminar20121222Rainbow appsshonanseminar20121222
Rainbow appsshonanseminar20121222
 
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
 
フリーランサーの2014年振り返り
フリーランサーの2014年振り返りフリーランサーの2014年振り返り
フリーランサーの2014年振り返り
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
 
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
 
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えますエンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
エンジニア vs ディレクターの戦いに終止符を!日々を穏やかに過ごすコツ教えます
 
App inventor for bussiness
App inventor for bussinessApp inventor for bussiness
App inventor for bussiness
 
リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~
リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~
リアルタイムドキュメンテーション ハンズオンセミナー ~スマートフォンだけで記録・編集・公開~
 
アプリプロモーションのこれまでとこれから(2014/7/4)
アプリプロモーションのこれまでとこれから(2014/7/4)アプリプロモーションのこれまでとこれから(2014/7/4)
アプリプロモーションのこれまでとこれから(2014/7/4)
 
情報の『見える化』ってなぜ大事?どうやるの? ~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』
情報の『見える化』ってなぜ大事?どうやるの?~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』情報の『見える化』ってなぜ大事?どうやるの?~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』
情報の『見える化』ってなぜ大事?どうやるの? ~グラフィック・レコーディングで考えてみよう~フェリス女学院大学『社会的起業』
 
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
女ゴコロを形にする!現役女性ディレクターが語る女子にウケるサービス作りとは?
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409
 

More from Risako Imai

a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】
a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】
a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】
Risako Imai
 
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
Risako Imai
 
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
Risako Imai
 
コンテンツファーストなWebサイト運用
コンテンツファーストなWebサイト運用コンテンツファーストなWebサイト運用
コンテンツファーストなWebサイト運用
Risako Imai
 
Webデザイン 参考資料の活用法
Webデザイン 参考資料の活用法Webデザイン 参考資料の活用法
Webデザイン 参考資料の活用法
Risako Imai
 
CMSと相性抜群のWebフォント 主要3サービスのご紹介
CMSと相性抜群のWebフォント 主要3サービスのご紹介CMSと相性抜群のWebフォント 主要3サービスのご紹介
CMSと相性抜群のWebフォント 主要3サービスのご紹介
Risako Imai
 
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 AutumnSketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
 

More from Risako Imai (7)

a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】
a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】
a-blog cmsを使うデザイナーのための5つの心得【a-blog cms Training Camp 2016 Autumn】
 
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
 
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
 
コンテンツファーストなWebサイト運用
コンテンツファーストなWebサイト運用コンテンツファーストなWebサイト運用
コンテンツファーストなWebサイト運用
 
Webデザイン 参考資料の活用法
Webデザイン 参考資料の活用法Webデザイン 参考資料の活用法
Webデザイン 参考資料の活用法
 
CMSと相性抜群のWebフォント 主要3サービスのご紹介
CMSと相性抜群のWebフォント 主要3サービスのご紹介CMSと相性抜群のWebフォント 主要3サービスのご紹介
CMSと相性抜群のWebフォント 主要3サービスのご紹介
 
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 AutumnSketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
 

社会人になって振り返る グランプリを穫ったWebアプリの作り方