先日、弊社で運営しているコンペナビで、「自治体向け動画コンテスト主催サポートプラン」というLPを作成し公開しました。  
  
<a href="https://compe.sterfield.jp/lp_jichitai" target="_blank">コンペナビ　自治体向け動画コンテスト主催サポート</a>  

私はこのLP制作につき、デザイナーとコーディングを担当し作成しました。  

この案件は弊社の社内案件であり、若手の営業担当がディレクションを行い、私が制作という関係で進めました。

最終的に納得のいく物が作成できましたが、振り返ってみると、企画段階でもっと詰めるべきことがあったし、ディレクターと作業者の間でどこまでが自分が主導して進めるべきか？を悩み、時にはお互いに担当分野を越境したような動きがありました。  

また、社内の関係者間でも、相談するべき点がありました。  
この案件を通して、改めてディレクションの大切さを実感し、反省を兼ねてブログに残します。


## プロジェクトのスタート

当初私のもとには図1の形でまとめられたワイヤーを渡されました。  

図1
<img src="/uploads/20231020_1_16304a854a.png" alt="企画書第一段階">

ワイヤーのコンテンツを大まかなに分けると以下の内容となっていました。  

第1要素　（メインビジュアル要素）
・キャッチコピー
・コンペナビの強み（3点）
・メインビジュアル
・お問い合わせへのリンク

第2要素　
・動画コンテストを開催する意義とサポートする旨の文章
・具体的なサポート内容を示すアイコン

第3要素　
・コンペナビの強み５点を強調する旨のコンテンツ

第4要素　
・コンペ開催のフローと料金について（コンペナビの内容のコピー）

第5要素
・実績

第6要素（最下部）
・お問い合わせフォーム


そして、  
・デザインはコンペナビと関連ある物。コンペナビの下層ページのようなイメージでコンペナビのコンテンツだとわかるものにしてほしい。  
・コンテンツの内容はワイヤーの内容にしたい。  
・この案で上長からGoサインが出ているから進めてもらいたい  

という話をいただきました。  

率直に私が思ったことはまだ、ワイヤーとして完成していないと感じました。 そこで先ず私はディレクターと話し、コンテンツを整理しなおしました。

私は主に  
・メインビジュアルに要素を詰め込みすぎ。  
・メインビジュアルのコンペナビの強み（3点）もこれだけで1つのコンテンツとして成立するし、補足的に見せる内容ではない。  
・全体的にテキストが多い。ビジュアルで見せる部分とテキストで説明する部分を意識した方が良い。  
・第3要素のコンペナビの強みもリズミカルに見せるなら3つくらいに絞った方がよい。  
・補足したい説明があれば、よくある質問というコンテンツにしてQ＆A方式で解説すれば見栄えもよい。  

と言う点を指摘しました。  

そこで、私とディレクターの間でワイヤーを作り直す作業が始まりました。  
このやり取りはプロジェクトを進める上で別に間違ってはいなかったでしょう。  
ただ、デザイナーの私がどこまで口を出すべきか悩みました。  


### 反省点：  
・デザイナーに話を持っていく前に、もっと詰めるべき点があったのでは？  
・制作部としては私がデザイン作業をしていると思っていた。役割を明確にするべきだった。  



## ワイヤー完成からデザイン完成迄

私はワイヤーの内容を大まかにレイアウトし、画面の構成を作る作業をしました。まだ、コンテンツについて考える余地もあり、
なるべくビジュアル要素を増やしてテキスト量を減らすこと、言い回しや見せ方を工夫することで省略できる点はないか、
コンテンツの順番を変えることでよりインパクトが出る見せ方にならないか？などの点を工夫して作成をしました。  


そして、何か思いつけば図2のように実際に簡易的なサンプルを作って、ディレクターに提案するという流れで作業を進めました。
こうして同意を得て、細部まで含めて作成する作業に入りました。  

図2
<img src="/uploads/20231010_2_7c3fe1e73b.png" alt="気可食第一段階">



このとき、デザインはコンペナビを踏襲してほしいという要望を聞いていたので、コンペナビの色使いやアイコンの使い方を見てそれに
よせる作業をし図3の形でまとめました。  


図3
<img src="/uploads/20231020_3_5982681709.png" alt="図3">

そして、私及びディレクター双方が納得し、コーディング開始の段階になりましたが、この段階で上長に確認をいただきました。 
  
この時頂いた意見は、    
・実績をもっと前面に打ち出す形の方がいい。  
・コンペナビの強みという点が取ってつけたように見える。  
・動画コンテストを開く意義について言っているコンテンツが少ない。  
  
というものでした。 

私は当初のワイヤーがテキストが多く、すっきり見せることを意識していた。しかし、この意識を強くしたため、必要であった要素を作業の過程で削っていました。
結果、このデザイン案は作り直しとなったのですが、相談するべきタイミングは明らかに間違えてしまいました。


### 反省点：
・作業を進める段階で完成像の指針がぶれてしまった。  
・部署内で相談するべきタイミングをもっと増やすべきだった。  


## 仕切り直しから完成まで

結局案件は、ディレクター側で再度ワイヤーから作り直すという話になり、2週間くらい経過したらディレクターから新しいワイヤー（図4）が渡されました。
ほぼ、最終系に近い形でいただきました。  

図4
<img src="/uploads/20231020_4_4c7ec1839f.png" alt="図4">

そして、ディレクターが参考にしたWebサイトのURLと一緒に渡され、この形で作り細部はコーディングをしながら直してほしい。
と言われてコーディング作業開始に至りました。  

ここまで完成されたものを渡されたら、デザイナー側でビジュアル要素を作る作業はほぼありませんでした。ただ、これをコーダー目線で見た場合、設計図としては
足りていない点があります。
例えば、  

・メインビジュアルはリキッドデザインになっているが、その他のコンテンツは幅が想定されていない。  
・コーディングで再現するのは難しい部分がある。  
・レスポンシブデザインを意識したとき、レイアウトの変化を意識していない。  

なので、画像の切り出し方に困ってしまったり、作りなおしになった部分もありました。
また、参考にしたWebサイトを見ると、スクロールしてコンテンツが表示されると簡単なアニメーションと共に表示される仕掛けが（フェードインするなど）がありました。  

これを導入するかディレクター側では答えを持っていませんでした。なので、私は「動画」を扱っている以上、動きのある演出の方が良いと提案し、動きを入れるようにしました。  

このような形で導入が決まったのでレイアウト構成の作業をしながらアニメーションを追加し、私の感覚で単調にならないように工夫しながら実装しました。
このため、ディレクター側で考える工数より多くの時間が私の作業段階で発生しました。

更に、完成間近のタイミングでコンペナビのページからこのLPにリンクを貼る依頼を受けました。  

ディレクターの指示では、  

・ヘッダー部分にテキストとボタンを設置してほしい。  
・コンペ全般の主催をすることを進めるページにリンクするボタンを設置してほしい  

という物でした。  
ヘッダー部分は問題なかったのですが、後者の依頼は、意図を聞いてみると新サービスなので、関連項目として見せたいとのことでした。  

このような意図であるならば、ボタンではテキストの説明が必要になるし、テキストを書けばページ本来の趣旨を妨害してしまう。だからバナーの形にするべきと説明しました。  
結果、バナー制作という想定してないコストもかかることになりました。



### 反省点：  
・コーダーに依頼するのであれば、このような形のワイヤーでよいが、デザインも含めて依頼するなら作りすぎている。  
・コーディング開始前に実現できるか検討した上で作業に入るべきだった。  
・コーダーに渡すワイヤーなら、動的なイメージについてどのようにするかも含めて検討して渡すべきだった。  
・全体的な見積もりがそもそも甘い。  


## まとめ
今回の案件はディレクター側も私のスキルを知っているという前提での依頼の仕方になっています。また、制作部としても比較的にリソースを割けるタイミングだから、着手したものでした。  
しかし、社内案件でも、社内の人を使うから無尽蔵に使える物ではありません。
      
成果物としては良い物が作れましたが、全体的に多くのコストをかけてしまいました。この点については、企画段階でチーム全体での相談が足りなかったことに原因があります。  
今後はもっとコミュニケーションを取り、よく相談しながら業務にあたっていきます。




large_3909820_m.jpg

medium_3909820_m.jpg

small_3909820_m.jpg

thumbnail_3909820_m.jpg

3909820_m.jpg

制作するにあたりディレクションの重要性を改めて感じたこと 

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  タスク管理ツールの紹介です。<br />
  既存のツールでは以下を触っていました</p>
<blockquote><p>  ・backlog<br />
  ・trello</p></blockquote>
<p>  上記で足りない「見た目のわかりやすさ」「リマインド機能」「時間単位での管理」<br />
  などを補完するものを探して</p>
<blockquote><p>  <a href="https://nozbe.com/jp/">Nozbe</a></p></blockquote>
<p>  という管理ツールに行き着きました。</p></div>
<h3>やること</h3>
<div style="padding-left: 15px;">
<blockquote><p>  1. アカウント登録 (フリー, Googleアカウント同期で即作成出来ました)<br />
  2. タスク, カテゴリ 登録<br />
  3. プロジェクト登録<br />
  4. 連携、通知設定 (optional)</p></blockquote>
<p>  有料プランでは「チーム」機能が使え、<br />
  メンバのリソース管理や週報機能なども使用出来る模様。</p></div>
<h3>外観と操作性</h3>
<div style="padding-left: 15px;">
  トップ<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13477" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-768x384.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-1024x512.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.26.43.png 1916w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  シンプルかつ目的に到達しやすいUI。<br />
  Priorityには期限が近づいたタスクや重要度の高いタスクが自動的に一覧表示されます。</p>
<p>  Inboxはとりあえずタスク化するメモ的な役割の管理ページ。</p>
<p>  プロジェクトはその名の通りプロジェクトごとのタスク管理ページ。</p>
<p>  Priorityを見てみましょう。<br />
  期日の近い順と、必要工数、残工数がステータスバーに表示されるのがパット見で判り易い。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13478" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-768x383.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-1024x511.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.29.39.png 1915w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  プロジェクト一覧。<br />
  一覧からタスクを選択すると右のペインに所要時間や繰り返し設定、期日が表示されます。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13479" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-768x383.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-1024x511.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.31.26.png 1917w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>  ここで一番のネックが「所要時間」が「８時間」までしか出来ないこと。。。<br />
  一日単位の管理なのか８時間超えのタスクをどうすればよいのか、、、思い悩み中です。</p></div>
<h3>リマインド機能</h3>
<div style="padding-left: 15px;">
  今日と明日、ともに通知してくれる。<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-13480" srcset="/uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-300x150.png 300w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-768x384.png 768w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-1024x513.png 1024w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27-228x114.png 228w, /uploads-archive/2017/12/ScreenShot-2017-12-12-17.35.27.png 1910w" sizes="(max-width: 300px) 100vw, 300px" /><br />
  もちろんスマホ版のアプリもあるのでタスクが埋もれやすい人向け。</div>
<h3>総観</h3>
<div style="padding-left: 15px;">
  所要時間の単位が一日以下(？)というのが規模の大きいプロジェクトに向きません。</p>
<p>  リマインドや残時間を見える化してくれるところが<br />
  「時間に追われてタスクが埋もれる・忘れる」人向け的な作りになっています。</p>
<p>  個人的にはタスクの「進捗率」「所要時間」が改善されたすぐ有料版でも導入したいです。</p></div>


タスク管理ツールを探して

<p></p>
<h2>はじめに</h2>
<div style="padding-left: 15px;">
  プロジェクトを上手く進行するにあたって欠かせないプロジェクト管理ツール。<br />
  redmine, JIRA, サイボウズ などフリーのものから有料のものまで色々とあります。</p>
<p>  今回はコスパの良さげなBacklogについてフォーカスします</p></div>
<h2>出来ること・出来ないこと</h2>
<div style="padding-left: 15px;">
  出来ること</p>
<blockquote><p>
    1. タスク管理<br />
    2. スケジュール管理<br />
    3. 工数管理<br />
    4. Gitでのバージョン管理とタスクの連携<br />
    5. ファイル共有
  </p></blockquote>
<p>  出来ないこと</p>
<blockquote><p>
    1. チケット管理<br />
    2. 複数の担当者に対するタスク登録<br />
    3. 詳細なガントチャート機能
  </p></blockquote>
<p>  低コストで手軽なプロジェクト管理で良いという企業向けです。</p></div>
<h2>大まかな構成、構成要素について</h2>
<div style="padding-left: 15px;">
<h3>プロジェクト</h3>
<p>  案件とほぼ同義</p>
<h3>スペース</h3>
<p>  「プロジェクト」の母体。共同で案件をリリースしていく団体、大抵は企業にあたります。</p>
<h3>メンバ</h3>
<p>  社員など「プロジェクト」に参加してタスクの追加、あるいは閲覧のみなど権限設定によって挙動は異なりますがプロジェクトの情報を共有する対象者となる存在。</p>
<h3>グループ</h3>
<p>  「メンバ」のカテゴライズ用の存在。例えば「コーダー」「エンジニア」などでしょうか。</p>
<h4>プロジェクトを作る</h4>
<p>  「スペース」を立ち上げたら(招待されたら)まず「プロジェクト」を作成しましょう。<br />
  「スペース」「プロジェクト」の「プロジェクトの追加」ボタンから登録画面で作成出来ます。<br />
  <a href="/uploads-archive/2017/03/64a936a5302c905140a4a0ba1f870c6a.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/64a936a5302c905140a4a0ba1f870c6a-285x300.png" alt="スクリーンショット 2017-03-14 15.08.11" width="285" height="300" class="alignnone size-medium wp-image-12657" srcset="/uploads-archive/2017/03/64a936a5302c905140a4a0ba1f870c6a-285x300.png 285w, /uploads-archive/2017/03/64a936a5302c905140a4a0ba1f870c6a-768x809.png 768w, /uploads-archive/2017/03/64a936a5302c905140a4a0ba1f870c6a-228x240.png 228w, /uploads-archive/2017/03/64a936a5302c905140a4a0ba1f870c6a.png 813w" sizes="(max-width: 285px) 100vw, 285px" /></a></p>
<h4>メンバの招待</h4>
<p>  次に「プロジェクト」に関係者を「メンバ」として招待します。権限の設定もここでします。<br />
  各プロジェクトページの「プロジェクト設定」「参加ユーザ」から「スペース」に居るユーザを追加出来ます。<br />
<a href="/uploads-archive/2017/03/e7b9e907e012f32dbb4bc8cddd5a9d2d.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/e7b9e907e012f32dbb4bc8cddd5a9d2d-300x179.png" alt="スクリーンショット 2017-03-14 15.09.14" width="300" height="179" class="alignnone size-medium wp-image-12658" srcset="/uploads-archive/2017/03/e7b9e907e012f32dbb4bc8cddd5a9d2d-300x179.png 300w, /uploads-archive/2017/03/e7b9e907e012f32dbb4bc8cddd5a9d2d-768x458.png 768w, /uploads-archive/2017/03/e7b9e907e012f32dbb4bc8cddd5a9d2d-228x136.png 228w, /uploads-archive/2017/03/e7b9e907e012f32dbb4bc8cddd5a9d2d.png 962w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  メンバを追加したらタスクを担当者割り振りしますが、その前に「タスク」登録後にプロジェクト管理を進行しやすくするための項目別に触れます</p></div>
<h2>プロジェクトを進めるための指標</h2>
<div style="padding-left: 15px;">
<h3>カテゴリ</h3>
<p>  「プロジェクト設定」「カテゴリー」から追加編集削除が可能。<br />
  課題の管理時にグルーピングを管理しやすくするためのタグのようなものです。複数項目を課題に付与出来ます。上手く活用しましょう。<br />
  例)<br />
  作業カテゴリ: テスト, 修正, 開発, 構築<br />
  機能カテゴリ: 管理者ページ, フロントページ, バッチ<br />
  などなど。。課題のカテゴライズはその後のフローのキモです！</p>
<h3>種別</h3>
<p>  課題の種類。<br />
  デフォルトで &#8220;タスク&#8221;, &#8220;バグ&#8221;, &#8220;要望&#8221;, &#8220;その他&#8221; が登録済みです。<br />
  これも課題を上手く活用するために最初に整備しましょう。</p>
<h3>マイルストーン</h3>
<blockquote><p>マイルストーンとは、物事の進捗を管理するために途中で設ける節目をいう。もとは道路などに置かれ、距離を表示する標識（里程標）のこと。</p>
<p>コトバンクより引用</p></blockquote>
<p>  例えばを全体の大きなマイルストーンとしつつ、その中で &#8220;要件定義&#8221;,&#8221;開発&#8221;,&#8221;テスト&#8221; などとフェーズを分けて管理することで節目の管理をすることが可能です。</p>
<h3>発生バージョン</h3>
<p>  これはBacklog独自の仕様かもしれないのですが、タスクや要望が発生したプロジェクトのバージョンを指します。<br />
  進行しているプロジェクトに対して現在アクティブなバージョンを決める必要があります、、、が項目が見当たらなかったので割愛。</p></div>
<h2>いざ課題の登録</h2>
<div style="padding-left: 15px;">
  「課題の追加」メニューからすぐに出来ます。<br />
  前項のマイルストーンやカテゴリを活用すると、リリースまでの期限・進捗をガントチャートで意識しやすくなります。<br />
  また「予定時間」「実績時間」も活用するとマイルストーンに対して進捗、残時間をグラフにて可視化してマネージしやすいでしょう。</p>
<p>  サンプルで作ったガントチャートでこんな感じになります。<br />
<a href="/uploads-archive/2017/03/7834ec994025e73bf776f023cc71bfc9-1.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/7834ec994025e73bf776f023cc71bfc9-1-300x219.png" alt="スクリーンショット 2017-03-14 16.14.42" width="300" height="219" class="alignnone size-medium wp-image-12682" srcset="/uploads-archive/2017/03/7834ec994025e73bf776f023cc71bfc9-1-300x219.png 300w, /uploads-archive/2017/03/7834ec994025e73bf776f023cc71bfc9-1-768x561.png 768w, /uploads-archive/2017/03/7834ec994025e73bf776f023cc71bfc9-1-1024x748.png 1024w, /uploads-archive/2017/03/7834ec994025e73bf776f023cc71bfc9-1-228x166.png 228w, /uploads-archive/2017/03/7834ec994025e73bf776f023cc71bfc9-1.png 1156w" sizes="(max-width: 300px) 100vw, 300px" /></a></div>
<h2>使えると更に便利な機能 (ファイル共有)</h2>
<div style="padding-left: 15px;">
  ファイルサーバーとしての機能も便利。</p>
<p>  メニューから「ファイル」を選択し、自由にディレクトリやファイルを作成出来ます。<br />
  またファイル共有も可能でWindowsならExplorer, MacならFinder経由でリモートと同期してファイルへのアクセスが可能です。<br />
  <a href="/uploads-archive/2017/03/409b55e1307e39cc000dd6391aef1140.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/409b55e1307e39cc000dd6391aef1140-300x208.png" alt="スクリーンショット 2017-03-14 16.19.46" width="300" height="208" class="alignnone size-medium wp-image-12673" srcset="/uploads-archive/2017/03/409b55e1307e39cc000dd6391aef1140-300x208.png 300w, /uploads-archive/2017/03/409b55e1307e39cc000dd6391aef1140-228x158.png 228w, /uploads-archive/2017/03/409b55e1307e39cc000dd6391aef1140.png 341w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
<a href="/uploads-archive/2017/03/90f551366c2dd775e5e94760f486ce3b.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/90f551366c2dd775e5e94760f486ce3b-300x206.png" alt="スクリーンショット 2017-03-14 16.58.18" width="300" height="206" class="alignnone size-medium wp-image-12683" srcset="/uploads-archive/2017/03/90f551366c2dd775e5e94760f486ce3b-300x206.png 300w, /uploads-archive/2017/03/90f551366c2dd775e5e94760f486ce3b-768x526.png 768w, /uploads-archive/2017/03/90f551366c2dd775e5e94760f486ce3b-228x156.png 228w, /uploads-archive/2017/03/90f551366c2dd775e5e94760f486ce3b.png 1014w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
<a href="/uploads-archive/2017/03/7e089e8fcfe6346836c8b2c7c699cdad.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/7e089e8fcfe6346836c8b2c7c699cdad-300x122.png" alt="スクリーンショット 2017-03-14 16.56.52" width="300" height="122" class="alignnone size-medium wp-image-12684" srcset="/uploads-archive/2017/03/7e089e8fcfe6346836c8b2c7c699cdad-300x122.png 300w, /uploads-archive/2017/03/7e089e8fcfe6346836c8b2c7c699cdad.png 768w, /uploads-archive/2017/03/7e089e8fcfe6346836c8b2c7c699cdad-228x93.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
</div>
<h2>使えると更に便利な機能 (Gitによるバージョン管理)</h2>
<div style="padding-left: 15px;">
  開発者であればこの機能は嬉しい。</p>
<p>  「プロジェクト設定」「Git」を選択。<br />
  初回は「このプロジェクトでGitを使う」と言うダイアログが出て来るので押下。</p>
<p>  リポジトリ名を入力してリポジトリを作成します。<br />
<a href="/uploads-archive/2017/03/de035c18957f0869151b1543c935a86f.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/de035c18957f0869151b1543c935a86f-300x234.png" alt="スクリーンショット 2017-03-14 16.24.14" width="300" height="234" class="alignnone size-medium wp-image-12674" srcset="/uploads-archive/2017/03/de035c18957f0869151b1543c935a86f-300x234.png 300w, /uploads-archive/2017/03/de035c18957f0869151b1543c935a86f-768x598.png 768w, /uploads-archive/2017/03/de035c18957f0869151b1543c935a86f-228x178.png 228w, /uploads-archive/2017/03/de035c18957f0869151b1543c935a86f.png 818w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  これだけではバージョン管理は出来ません。<br />
  参加メンバ各「個人設定」の「SSH公開鍵」でGitアクセス時に使用する公開鍵を貼り付けて登録します。<br />
  鍵の生成はPuTTYやターミナルの</p>

		<div id="crayon-6495402647a57378243706" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">Shell</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
ssh-keygen -t rsa</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402647a57378243706-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402647a57378243706-1"><span class="crayon-i">ssh</span>-<span class="crayon-i">keygen</span><span class="crayon-h"> </span>-<span class="crayon-i">t</span><span class="crayon-h"> </span><span class="crayon-i">rsa</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>などで各自作ります。</p>
<p>  作業ディレクトリにて</p>

		<div id="crayon-6495402647a5c676483379" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">Shell</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
git clone sterfield@sterfield.git.backlog.jp:/SAMPLE_01/sample_git.git</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402647a5c676483379-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402647a5c676483379-1"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">sterfield</span><span class="crayon-sy">@</span><span class="crayon-i">sterfield</span><span class="crayon-e">.git</span><span class="crayon-e">.backlog</span><span class="crayon-e">.jp</span><span class="crayon-sy">:</span>/<span class="crayon-i">SAMPLE_01</span>/<span class="crayon-i">sample_git</span><span class="crayon-e">.git</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>としてまず複製。その後はgit add, pushなどで以下のようにcommit履歴や差分を手軽に確認することが可能です。<br />
<a href="/uploads-archive/2017/03/ebbbf696b24cf5e4096045f9375d5747.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/ebbbf696b24cf5e4096045f9375d5747-300x144.png" alt="スクリーンショット 2017-03-14 16.38.52" width="300" height="144" class="alignnone size-medium wp-image-12675" srcset="/uploads-archive/2017/03/ebbbf696b24cf5e4096045f9375d5747-300x144.png 300w, /uploads-archive/2017/03/ebbbf696b24cf5e4096045f9375d5747-228x109.png 228w, /uploads-archive/2017/03/ebbbf696b24cf5e4096045f9375d5747.png 727w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
<a href="/uploads-archive/2017/03/5f3e2d9e6a34e989df9bf95cb80ecafd.png"><img decoding="async" loading="lazy" src="/uploads-archive/2017/03/5f3e2d9e6a34e989df9bf95cb80ecafd-300x251.png" alt="スクリーンショット 2017-03-14 16.42.03" width="300" height="251" class="alignnone size-medium wp-image-12676" srcset="/uploads-archive/2017/03/5f3e2d9e6a34e989df9bf95cb80ecafd-300x251.png 300w, /uploads-archive/2017/03/5f3e2d9e6a34e989df9bf95cb80ecafd-228x191.png 228w, /uploads-archive/2017/03/5f3e2d9e6a34e989df9bf95cb80ecafd.png 736w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  また課題キーと連動することが可能。<br />
  以下のような課題を追加後、Git上で課題キーと課題ステータスをセットでcommitへのコメントでpushします。</p>
<p>  push後、以下のようにステータスが自動的に変わってくれます。</p></div>

Backlogの活用術について

<p>&nbsp;</p>
<h2><b>Scratch</b> (スクラッチ)とは</h2>
<blockquote><p><b>Scratch</b> (スクラッチ) とは初心者が最初に正しい構文の書き方を覚えること無く結果を得られるプログラミング言語学習環境である。MITメディアラボが開発し、遊び心のある実験やインタラクティブアニメーション、ゲームなどの製作を通してさらなる学習のやる気を起こさせることを意図している。（wiki）</p></blockquote>
<h2>特点</h2>
<p>今までクラシックプログラマは</p>

		<div id="crayon-649540264776a989795457" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">Java</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
	// pre: list != null
	// post: return sum of elements
	// use traditional for loop
	public static int sumListOld(int[] list)
	{	int total = 0;
		for(int i = 0; i &lt; list.length; i++)
		{	total += list[i];
			System.out.println( list[i] );
		}
		return total;
	}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264776a989795457-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264776a989795457-2">2</div><div class="crayon-num" data-line="crayon-649540264776a989795457-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264776a989795457-4">4</div><div class="crayon-num" data-line="crayon-649540264776a989795457-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264776a989795457-6">6</div><div class="crayon-num" data-line="crayon-649540264776a989795457-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264776a989795457-8">8</div><div class="crayon-num" data-line="crayon-649540264776a989795457-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264776a989795457-10">10</div><div class="crayon-num" data-line="crayon-649540264776a989795457-11">11</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264776a989795457-1"><span class="crayon-h">	</span><span class="crayon-c">// pre: list != null</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264776a989795457-2"><span class="crayon-h">	</span><span class="crayon-c">// post: return sum of elements</span></div><div class="crayon-line" id="crayon-649540264776a989795457-3"><span class="crayon-h">	</span><span class="crayon-c">// use traditional for loop</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264776a989795457-4"><span class="crayon-h">	</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-m">static</span><span class="crayon-h"> </span><span class="crayon-t">int</span><span class="crayon-h"> </span><span class="crayon-e">sumListOld</span><span class="crayon-sy">(</span><span class="crayon-t">int</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-i">list</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264776a989795457-5"><span class="crayon-h">	</span><span class="crayon-sy">{</span><span class="crayon-h">	</span><span class="crayon-t">int</span><span class="crayon-h"> </span><span class="crayon-i">total</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264776a989795457-6"><span class="crayon-h">		</span><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">int</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">list</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span>++<span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-649540264776a989795457-7"><span class="crayon-h">		</span><span class="crayon-sy">{</span><span class="crayon-h">	</span><span class="crayon-i">total</span><span class="crayon-h"> </span>+=<span class="crayon-h"> </span><span class="crayon-i">list</span><span class="crayon-sy">[</span><span class="crayon-i">i</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264776a989795457-8"><span class="crayon-h">			</span><span class="crayon-i">System</span><span class="crayon-sy">.</span><span class="crayon-i">out</span><span class="crayon-sy">.</span><span class="crayon-e">println</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">list</span><span class="crayon-sy">[</span><span class="crayon-i">i</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264776a989795457-9"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264776a989795457-10"><span class="crayon-h">		</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-i">total</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264776a989795457-11"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>スクラッチは</p>
<p><a href="/uploads-archive/2017/03/screencapture-scratch-mit-edu-projects-1300590-1489472059298.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-12656" src="/uploads-archive/2017/03/screencapture-scratch-mit-edu-projects-1300590-1489472059298-300x163.png" alt="screencapture-scratch-mit-edu-projects-1300590-1489472059298" width="300" height="163" srcset="/uploads-archive/2017/03/screencapture-scratch-mit-edu-projects-1300590-1489472059298-300x163.png 300w, /uploads-archive/2017/03/screencapture-scratch-mit-edu-projects-1300590-1489472059298-768x417.png 768w, /uploads-archive/2017/03/screencapture-scratch-mit-edu-projects-1300590-1489472059298-1024x556.png 1024w, /uploads-archive/2017/03/screencapture-scratch-mit-edu-projects-1300590-1489472059298-228x124.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>積み木なように構成されている。</p>
<h2>プログラマーの基礎鍛錬必要な機能</h2>
<p>アーキテクチャ</p>
<p>MVCの理念</p>
<p><img decoding="async" loading="lazy" class="alignnone" src="http://write-remember.com/wordpress/wp-content/uploads/2013/04/mvc_model.png" width="1090" height="470" /></p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2017/03/579aa5d62395548e81dd0923d09ffd9a.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-12665" src="/uploads-archive/2017/03/579aa5d62395548e81dd0923d09ffd9a-300x204.png" alt="QQ20170314-153954@2x" width="300" height="204" srcset="/uploads-archive/2017/03/579aa5d62395548e81dd0923d09ffd9a-300x204.png 300w, /uploads-archive/2017/03/579aa5d62395548e81dd0923d09ffd9a-228x155.png 228w, /uploads-archive/2017/03/579aa5d62395548e81dd0923d09ffd9a.png 418w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>View:  motion, looks, sound, pen</p>
<p>Model: data</p>
<p>Control: Events, control</p>
<h2>利点</h2>
<p>正しいプログラマーロジックのトレンドに優秀。</p>
<p>小さいDEMOプロジェクトを作るにも便利です。</p>
<p><a href="https://scratch.mit.edu/projects/1300590/#editor">Demoサイト</a></p>
<p>Reference:</p>
<p>https://ja.wikipedia.org/wiki/Scratch_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)</p>

初心者向け、プログラマーロジックトレンド

<p>プロトタイプやワイヤーフレームを作るのに便利なフリー素材を紹介します。</p>
<h2>Bootflat UI Kit</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-11205" src="/uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-1024x481.png" alt="スクリーンショット 2016-06-21 11.03.27" width="1024" height="481" srcset="/uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-1024x481.png 1024w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-300x141.png 300w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-768x361.png 768w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-228x107.png 228w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55.png 1188w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
bootflatというbootstrapを使ったcssフレームワークでそのパーツがPSDとしてダウンロード出来ます。</p>
<p><a href="http://bootflat.github.io/free-psd.html" target="_blank">Bootflat UI Kit Free PSD Download &#8211; Bootflat</a></p>
<h2>UX Flowchart Cards</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-11206" src="/uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6.png" alt="スクリーンショット 2016-06-21 11.03.45" width="753" height="562" srcset="/uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6.png 753w, /uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6-300x224.png 300w, /uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6-228x170.png 228w" sizes="(max-width: 753px) 100vw, 753px" /><br />
なんと128枚ものタイプの画面とその他アイコンやフローを表現するための矢印もそろっています。<br />
メールアドレスを登録するとダウンロード出来ます。<br />
これをパワポなんかに貼っていくだけでwebサイトのフローチャートが簡単に作れてしまいますね！</p>
<p><a href="https://uiuxassets.com/assets/ux-flowchart-cards/" target="_blank">UX Flowchart Cards &#8211; UI/UX Assets</a></p>
<h2>Material Mockups</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-11207" src="/uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562.png" alt="スクリーンショット 2016-06-21 11.04.06" width="974" height="731" srcset="/uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562.png 974w, /uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562-300x225.png 300w, /uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562-768x576.png 768w, /uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562-228x171.png 228w" sizes="(max-width: 974px) 100vw, 974px" /><br />
スマホ用のECアプリのためのワイヤーフレームです。<br />
15のUI画面が揃っているので、たいていのECアプリのワイヤーフレームはこれだけで事足りそうな気がします。</p>
<p><a href="http://materialmockups.com/" target="_blank">Material Mockups</a></p>
<p>最近はこのようなフリー素材が多くモックアップを手早く見た目よく作成できるので、<br />
導線やコンテンツを考えるの力を注ぐ事ができそうです。</p>


プロトタイプ、ワイヤフレーム作成に便利なフリー素材

<p>うちの会社でももう一度振り返る必要もあるかもしれませんが、<br />
他の方々、会社さんはどのようなフローでやっているのかが気になる所です。</p>
<p>この流れをお客さんと共有し、<br />
トラブルを軽減できるようになれたら素晴らしいですね。</p>
<p>やはり、トラブルの元は、</p>
<p><span style="font-size: large;"><strong>「認識の違い」</strong></span></p>
<p>が主になってくるのだと思います。</p>
<p><strong>「ここはこうだと思ってた」</strong>、<strong>「これはできると思ってた」</strong><br />
<strong> 「この後どう進むのか」</strong>、等々<br />
少しのズレが、大きくなり、重なることでトラブルが起こってしまうのではないかと思います。</p>
<p>それでは、記事にして頂いてる方を記載したいと思います。</p>
<p>&nbsp;</p>
<h2>web制作の流れ</h3>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.ar-ch.org/mt/archives/2012/05/web-3.html" target="_blank">Webサイト制作の一連の流れをまとめてみました | Arch</a></span><br />
順番がしっかりしており、非常に参考になります。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://vanidesign.blog.fc2.com/blog-entry-64.html" target="_blank">きっとトラブルが起きにくい！ウェブデザインの制作順序を書きました。 |　バニデザノート</a></span><br />
簡潔に流れを説明してくれおり、シンプルでわかりやすいです。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.webcreatorbox.com/tech/website-before-start-ready/" target="_blank">誰のため？何のため？Webサイトを作り始める前に。 | Webクリエイターボックス</a></span><br />
こちらは、実際にwebデザイナーがwebサイトを作るまでの流れで、プロジェクトとしての流れとは若干違い、<br />
作業の方法等を丁寧に説明してくれています。<br />
序盤の流れは、考えるべきことかと思います。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://webdesignrecipes.com/web-development-flow/" target="_blank">Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ</a></span><br />
上記同様な内容と似ています。<br />
どちらもフリーの方なので、「一人でやる場合」というイメージの方が強いかもしれません。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://design-spice.com/2011/06/23/website-rough/" target="_blank">私がwebサイトのラフデザインを制作する時の流れ │ Design Spice</a></span><br />
こちらはデザインを起こす順序が書かれており、他人の進め方を見れ、非常に参考になります。</p>
<p>&nbsp;</p>
<p>上記のリンクは流れとしては、<br />
個人よりで、作業としての流れだったので次はディレクターがやるべきことで、<br />
サイト制作を成功へと導くための記事を紹介します。</p>
<p>&nbsp;</p>
<h2>ディレクターがすべきこと</h3>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://web-d.navigater.info/cat1/13-1.html" target="_blank">プロジェクトの開始までにWebディレクターが用意するものとこと13個まとめ | Webディレクターズマニュアル</a></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://maka-veli.com/d-plan-threerules.html" target="_blank">ディレクターが思う。Webサイト設計時に必ず注意したい2つのこと（+1） / Maka-Veli .com</a></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.mdn.co.jp/di/articles/2108/" target="_blank">第1回　Webディレクターが押さえておくたったふたつのポイント &#8211; MdN Design Interactive</a></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.mdn.co.jp/di/articles/2107/" target="_blank">第2回　クライアントとのより良い関係を導くディレクション手法 &#8211; MdN Design Interactive</a></span></p>
<p>&nbsp;</p>
<p>こちらは制作の流れというよりも、<br />
webサイトの根底の部分を決めるための方法で、<br />
この根底をしっかり決め、お客さんと共有することで、<br />
途中、コロコロデザイン変更の修正について言われたり、<br />
そもそものコンテンツが変わったり、<br />
仕様が変わったりといったことを<br />
避けられるのではないのでしょうか。</p>
<p>それ以前に、webサイトとして小手先でない、<br />
意味のあるwebサイトが出来上がるのではないかと思います。</p>
<p>ぜひいいwebサイトを作って、<br />
お客さんに満足してもらいたいと思います！</p>
<p>おまけ<br />
<a href="http://www.yasuhisa.com/could/article/why-designers-fail/" target="_blank">デザインが失敗してしまう理由 : could</a></p>


もう一度見直してみよう！web制作の流れについてのまとめ

<p>css niteのセミナーに初めて参加してきました！</p>
<p><a href="http://cssnite.jp/coedo/vol12/" target="_blank">『CSS Nite @Co-Edo, Vol.12<br />
あると便利！コンセプトシートの重要性と具体的な作り方＆伝え方』</a><br />
講師は、<a href="http://web-d.navigater.info/" target="_blank">Webディレクターズマニュアル</a>の運営者である<br />
中村さん。</p>
<p>僕もよく拝見させていただいています。</p>
<p>ということで、webサイト、webサービスを制作する際に必要な心得というか、<br />
フローを学んで来ました。</p>
<p>この記事では、ディレクターとコンセプトについて、<br />
簡単にかいつまんで説明したいと思います。</p>
<h2>ディレクターの重要性</h3>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;"><strong>「Webディレクターの本来の職域」</strong></span></p>
<p>&nbsp;<br />
<span style="font-size: medium;"><strong>■商談・見積もり作成</strong></span><br />
<span style="font-size: medium;"> <strong> ■スケジュールの管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■制作の運用・進行管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■成果物の品質管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■システムの要件定義</strong></span><br />
<span style="font-size: medium;"> <strong> ■実装のチェック</strong></span></p>
<p>これは、会社によって違うと思いますが、だいたいこのぐらいの領域だと僕も思います。</p>
<p>簡単にいうと、ディレクターは</p>
<p>プロジェクトの<span style="color: #ff0000;"><strong>「中心」</strong></span>にいて、<br />
プロジェクトを<span style="color: #ff0000;"><strong>成功に導く役割</strong></span>を担っているとのことです。</p>
<h2>ディレクターがいないと？</h3>
<p>&nbsp;<br />
<span style="font-size: large;"><strong>「悲劇が生まれる」</strong></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><strong>■クライアントや担当者の意見に流され延々修正</strong></span><br />
<span style="font-size: medium;"> <strong> ■デザイナー、プログラマーは大変、イライラが募る</strong></span><br />
<span style="font-size: medium;"> <strong> ■だんだんと成果物も悪くなる</strong></span><br />
<span style="font-size: medium;"> <strong> ■半端なままリリース</strong></span><br />
<span style="font-size: medium;"> <strong> ■ユーザーはもちろん集まらない</strong></span><br />
<span style="font-size: medium;"> <strong> ■結果、売上も成果も出ない</strong></span></p>
<p>&nbsp;<br />
&nbsp;</p>
<p>うん、こういうのは経験もあるので、うなづきながら聞いていました。</p>
<p>そしてこんな悲劇が起こらないようにするためには、、、</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;">「ディレクターがサイトの</span><br />
<span style="font-size: medium;"> コンセプトを作成する必要がある」</span></p>
<p>&nbsp;</p>
<p>とのことで、<br />
こんなこともおっしゃっていました。</p>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;"><strong>「コンセプトを作るか</strong></span><br />
<span style="font-size: large;"> <strong> プロジェクトを破綻させるか」</strong></span></p>
<p>&nbsp;</p>
<p>これは極端ではありますが、<br />
このぐらいの気持ちを持ってやっていく必要があるということですね！！</p>
<p>&nbsp;</p>
<h2>コンセプトとは？</h3>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;">「何かしらのサービスや商材を</span><br />
<span style="font-size: large;"> Webを通じてユーザーに届けるための</span><br />
<span style="font-size: large;"> 企画・設計・制作・運用を貫く</span><br />
<span style="font-size: large;"> 大きなテーマのようなもの」</span></p>
<p style="text-align: center;"><span style="font-size: large;">『そのテーマを</span><br />
<span style="color: #ff0000; font-size: large;"> 誰もが覚えられるキャッチーなカタチ</span><br />
<span style="font-size: large;"> にしたもの』</span></p>
<p>&nbsp;</p>
<h3>コンセプトがあると？</h4>
<p>&nbsp;<br />
<strong>1．何のためのコンテンツか？の根拠がハッキリする</strong><br />
<strong> 2．制作チームと「最終的に目指すところ」を共有しやすくなる</strong><br />
<strong> 3．クライアント担当とも目線を同じくできる</strong><br />
<strong> 4．ディレクターが主導権を握りやすくなる</strong><br />
&nbsp;</p>
<h3>もしもプロジェクトにコンセプトが無かったら</h4>
<p>&nbsp;<br />
<strong>・クライアントは「格好いいかどうか？」で判断して</strong><br />
<strong> ・デザイナーは「俺のやりたい事かどうか？」で判断して</strong><br />
<strong> ・プログラマーは「仕様書の通り」にしか作ってくれなくて</strong><br />
<strong> ・ライターは「その場のノリ」で原稿を書いて</strong><br />
&nbsp;<br />
うんうん、つまり、自分の作業を言われたことや自分の勝手な考えの範囲でしかやらなくなるって<br />
ことですね。</p>
<p>何のためにやるのかという目的がわからない、理解していないので、目先のことしか考えられず、<br />
プロジェクトの成功を意識しなくなってしまうわけですね。<br />
というか成功するかなんてどうでもいいのかもしれません。</p>
<p>なので、自発的に、<strong>「ここはこうしたほうがいいんじゃないか？」</strong>という意見や、<br />
<strong>制作物に対するこだわり</strong>なんてものは出て来なくなりますね。</p>
<p>そうなると、いいものなんて出来上がるわけがないですよね。</p>
<p><span style="font-size: large;">ディレクターは、プロジェクトを成功に導くために、</span><br />
<span style="font-size: large;"> 軸となるコンセプトを設定し、メンバーの意識を高め、</span><br />
<span style="font-size: large;"> メンバーが力を発揮できるよう、裏方で汗をかく</span>、ってことでしょうか。</p>
<p>こうすることによって、絶対上手く行く！ってわけではないけれど、<br />
主導権握って進めることができるので、<br />
コンセプトを立てて、提案していきましょう！とのことでした。</p>
<p>今後も参考にさせてもらいます！！</p>


Blogブログ

Articles

Contact Us