企画書の書き方を既存サービスのスライドから学ぶ

下請けSIerで育ってしまったので、企画書の書き方を学ぶ機会がなかった。

今回はSlideshareにアップされているWebサービスの企画書から、企画書の書き方のポイントをまとめる。


Webサービスの企画書例

Chatworkの場合

スライドの内容は概ね以下の通り。
  • サービス開発の背景
  • サービスのコンセプト
  • サービスを開発することによって改善されること
  • サービスの画面イメージ
  • SWOT分析
  • 開発マイルストーン

Gunosyの場合

スライドの内容は概ね以下の通り。
  • サービス開発の動機
  • レコメンドシステムの有用性
  • サービスの今後の展望

企画書に必要な要素

Webサービスの企画書には
  • なぜ
  • 誰のために
  • いつまでに
  • どのようにして
開発するかを記すのが必須だと考えられる。
また、SWOT分析など、サービスのメリット・デメリットを示すのは、顧客(聴衆)に安心感を与えるという面で有用だ。

企画書をスライドで作成する場合の注意点

大学時代、スライドとレジュメの作成、それらを用いたプレゼンを繰り返し実施するゼミに所属していた。
恩師曰く、発表時、資料は以下のように使い分けるべきだということだった。
  • 要点はスライドで
  • 説明は口頭で
  • 資料はレジュメや用語集で
技術系の勉強会に参加すると、しばしば、レジュメに書くべき内容まで詰め込んでいるスライドを見かける(上で挙げたGunosyのスライドがそうだ)。
専門用語や用語説明で埋まっているスライドは以下のようなデメリットがあるので、注意すべきだろう。
  • 聴衆の意識がスライドに集中し、話を聴いてもらえない
  • 聴衆がその分野に詳しくない場合、話を聴く気をなくしてしまう

以上の必要要素と注意点を踏まえ、よりよい企画書を書けるようになりたい。

ゲーム屋が教える!売れるゲーム企画書の書き方

ゲーム屋が教える!売れるゲーム企画書の書き方

100万人を幸せにする本を出す方法: 今年こそ本を出したい人のための出版入門

100万人を幸せにする本を出す方法: 今年こそ本を出したい人のための出版入門

【2015年7月】デザインの参考にしているサイトまとめ

概要

流行のデザインやUIについて、ギャラリーサイトに掲載されるサイトを参考にすることが多いので、ブックマークしているWebデザインギャラリーサイトを紹介する。

io3000.com

業種、UIやデザイン傾向、配色でサイトを検索できる。

io3000.com

MUUUUU.ORG

縦に長いサイトを中心に集めたギャラリーサイト。 業種、UIやデザイン傾向、配色でサイトを検索できる。 比較的、日本のサイトが多い印象。

muuuuu.org

WEBサイトカッコイイ

「ヘッダー」「ナビゲーション」「見出し」……と、パーツに注目しているところが特徴。 ほぼ全て?日本語のサイト。

fukuoka-web.hustle.ne.jp

WEBデザインの見本帳

印象、業種、配色でサイトを検索できる。 ほぼ全て?日本語のサイト。

www.web-mihon.com

イケサイ

業種、配色でサイトを検索できる。 ほぼ全て?日本語のサイト。

www.ikesai.com

ウェブ・ファインダー

サイトの種類、業種、印象、配色でサイトを検索できる。 ほぼ全て?日本語のサイト。

w-finder.com

デジタルステージ

運営者のコメントがあるのが特徴。 ほぼ全て?日本語のサイト。

nicesite.digitalstage.jp

スマートフォンサイト集めました。

スマートフォンサイトだけを集めたギャラリーサイト。 業種・配色でサイトを検索できる。

http://sp-web.jp/sp-web.jp

Choicely

Webサイトに限らず、WebサービスWordPressテーマ、動画、プロダクトを集めたギャラリーサイト。

www.choicely.jp

図解ですべてわかる 世界の装飾デザイン見本帳

図解ですべてわかる 世界の装飾デザイン見本帳

ウェブ配色見本帳 実例で学ぶWebデザインの配色

ウェブ配色見本帳 実例で学ぶWebデザインの配色

GitHubにリポジトリを作った

転職活動でソースを見てもらうことが増えたが、JSファイルを行番号つきで印刷したりするのが面倒くさいので、GitHubリポジトリを作成した。

github.com

今は単純にテキストエリアの入力値を拾って文字数をカウントするだけだが、今後はライター業に活用できるよういろいろ機能を追加していきたい。 もちろんデザインも。

HTML5の最小構成

概要

新しくページを作る度にテンプレートをググるのが面倒なので備忘

実装

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta charset="utf-8" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <meta name="robots" content="noindex"/><!-- 検索避けする場合 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="shortcut icon" href="" /><!-- fabicon -->
  <link rel="stylesheet" href="" />
  <!--[if lt IE 9]>
  <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <script src="" type="text/javascript"></script>
</head>
<body>
  <!-- your content -->
</body>
</html>

参考

coliss.com

カラーパレットをAdobe Color CCで作成・公開する

概要

Photoshopを用いてカラーパレットを作成し、Adobe Color CCで公開する。

作業内容

作業内容は以下の通りである。

  1. 写真素材を入手する
  2. 写真素材にPhotoshopでモザイクをかける
  3. 好みの色をピックアップし、Adobe Color CCに登録する
  4. ライブラリに保存する

写真素材を入手する

最初に写真素材を入手する。知り合いのデザイナー曰く、「いかにイケてる写真を選ぶかがキモ」とのこと。 今回は以下の画像を拝借した。

f:id:yunokixxx:20150708073540j:plain 「鮮やかなカラーの画像」の写真・画像素材が全て無料のフリー素材集

写真素材にPhotoshopでモザイクをかける

先ほど入手した写真素材を加工する。 今回どうしてもグリーンとパープルが欲しかったため、「画質調整」→「カラー」→「色調・彩度」で色調を弄った。

f:id:yunokixxx:20150708073944j:plain

これに「フィルター」→「ぼかし」→「ぼかし(ガウス)」をかける。 その上から「フィルター」→「ピクセレート」→「モザイク」をかける。

f:id:yunokixxx:20150708074403j:plain

モザイクをかけるのはスポイトでのカラーのピックアップをしやすくするため。

好みの色をピックアップし、Adobe Color CCに登録する

スポイトで取得した色には16進数のカラーコードも表示されているので、それをAdobe Color CCに登録する。

f:id:yunokixxx:20150708075855j:plain

f:id:yunokixxx:20150708080452j:plain

ライブラリに保存する

Adobe Color CCの「保存」ボタンをクリックすると、ライブラリに保存することができる。 ライブラリに保存しておけば、後の再利用や編集も容易である。 他ユーザーにも使用を許可する場合は「このテーマを『探索』に登録します」にチェックを入れればいい。

f:id:yunokixxx:20150708081107j:plain

今回作成したカラーパレットは以下リンクから参照できる。

https://color.adobe.com/ja/green-and-purple-color-theme-6464197/

備考

今回は使いたいカラーが決まっていたため、Photoshop(Elements)を用いたが、そもそも画像からカラーパレットを作るだけならAdobe Color CCが標準機能として持っている。 画面右上のカメラアイコンから画像をアップロードすると、以下のようにカラーパレットを一発で作成してくれる。

f:id:yunokixxx:20150708081721j:plain

もちろん、この手順で作成したカラーパレットも保存・シェアが可能である。

配色&カラーデザイン ?プロに学ぶ、一生枯れない永久不滅テクニック?[デザインラボ]

配色&カラーデザイン ?プロに学ぶ、一生枯れない永久不滅テクニック?[デザインラボ]

CSSのposition指定をリセットする方法

概要

CSSにおいて、position:absolute/fixed/relative;の指定を外す方法

実装

li {
  position: static;
}

参考サイト

www.css-lecture.com

詳解逆引きHTML+CSS辞典

詳解逆引きHTML+CSS辞典

「Pages」で行番号を表示・印刷する

概要

Macの標準文書作成アプリ「Pages」で行番号を表示・印刷する。 Windowsであればサクラエディタで印刷していたのだが……

参考

実は以下のページに方法が書いてあるのだが、ピンとこないので備忘。

Pages:書類に行番号を追加する方法 - Apple サポート

実験

初期状態

f:id:yunokixxx:20150622201204p:plain

新しいフローティングテキストオブジェクトを作成

f:id:yunokixxx:20150622201452p:plain

本文の横にテキストボックスをドラッグ

f:id:yunokixxx:20150622201635p:plain

テキストボックスを細長い形にする

f:id:yunokixxx:20150622201951p:plain

使いたい数字をテキストボックスに入力

f:id:yunokixxx:20150622202054p:plain

「フォーマット」メニューから「詳細」を選択し、次に「オブジェクトをセクションマスターに移動」を選択

f:id:yunokixxx:20150622202359p:plain

感想

これは行番号は手打ちしろということだろうか? もう少し賢いやり方・アプリがあったらお知らせ願いたい。