path: root/files/ja/learn/common_questions/thinking_before_coding/index.html

---
title: どのように Web サイトのデザインを始めるのか?
slug: Learn/Common_questions/Thinking_before_coding
tags:
  - Beginner
  - Composing
  - NeedsActiveLearning
  - needsSchema
  - 初心者
translation_of: Learn/Common_questions/Thinking_before_coding
---
<p class="summary">この記事では、すべてのプロジェクトの重要な第一歩として、そのプロジェクトで達成したいことを定義します。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件</th>
   <td>なし</td>
  </tr>
  <tr>
   <th scope="row">目的</th>
   <td>目標を定義してウェブプロジェクトの方向性を明らかにする方法を学びます。</td>
  </tr>
 </tbody>
</table>

<h2 id="概要">概要</h2>

<p><span class="seoSummary">ウェブプロジェクトを開始するとき、多くの人が技術面に焦点を当てます。もちろん、作るものの技術に精通していなければなりませんが、本当に重要なことは何を達成したいかということです。そう、それは明らかなことのようですが、あまりにも多くのプロジェクトが技術的ノウハウがないためではなく、目標とビジョンがないために失敗します。</span></p>

<p>あなたがアイデアを得てそれをウェブサイトにしたいときには、何かをする前に答えるべきいくつかの質問があります：</p>

<ul>
 <li>本当にしたいことは何ですか？</li>
 <li>ウェブサイトは目標達成にどのように役立つでしょうか？</li>
 <li>目標を達成するために何をどのような順序で実行する必要がありますか？</li>
</ul>

<p>これらはすべてプロジェクトのアイデア化と呼ばれ、初心者であれ、経験豊富な開発者であれ、目標を達成するための最初のステップです。</p>

<h2 id="アクティブラーニング">アクティブラーニング</h2>

<p><em>アクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>

<h2 id="より深いダイビング">より深いダイビング</h2>

<p>プロジェクトは技術的側面から始まることはありません。ミュージシャンは、最初にプレイしたいことのアイデアがない限り、決して音楽を作ってはいけません。これは画家、作家、ウェブ開発者にとっても同じことです。テクニックは 2番目に来ます。</p>

<p>技術は明らかに重要です。ミュージシャンは楽器をマスターする必要があります。しかし、良いミュージシャンは、アイデアなしに良い音楽を生み出すことはできません。したがって、コードやツールなどの技術的な側面に飛び込む前に最初のステップに戻り、実行したいことを詳細に決定する必要があります。</p>

<p>はじめに友人と 1時間ディスカッションするのは良いことですが、不十分です。<span class="tlid-translation translation"><span title="">自分のアイデアを具現化するためにどのような道をたどらなければならないかを明確に把握するためには、座ってアイデアを体系化する必要があります。これを行うには、紙とペンと、少なくとも次の質問に答えるための時間が必要です。</span></span></p>

<div class="note">
<p><strong>メモ:</strong> プロジェクトのアイデア化を実行するための方法は無数にあります。ここにそれらすべてを提示することはできません (一冊の本では不十分です)。ここでは、プロフェッショナルが<a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">プロジェクトの理念</a>、<a href="http://en.wikipedia.org/wiki/Project_planning">プロジェクト計画</a>、および<a href="http://en.wikipedia.org/wiki/Project_management">プロジェクト管理</a>と呼ぶものを処理する簡単な方法を紹介します。</p>
</div>

<h3 id="本当にしたいことは何ですか？">本当にしたいことは何ですか？</h3>

<p>他のすべてを動かすので、これは答えるべき最も重要な問いです。到達したいすべての目標を列挙してください。お金を稼ぐための商品の販売、政治的意見の表明、新しい友達の会合、ミュージシャンとのギグ、猫の写真の収集など、それは何でもかまいません。</p>

<p>あなたがミュージシャンだとしましょう。あなたは次のことができます：</p>

<ul>
 <li>人々にあなたの音楽を聞いてもらう</li>
 <li>グッズを売る</li>
 <li>他のミュージシャンに会う</li>
 <li>あなたの音楽について話す</li>
 <li>ビデオを通して音楽を教える</li>
 <li>あなたの猫の写真を公開する</li>
 <li>新しいガールフレンド/ボーイフレンドを探す</li>
</ul>

<p>そのようなリストを取得したら優先順位を付ける必要があります。目標を最も重要なものからそうでないものに順番に並べます。</p>

<ol>
 <li>新しいガールフレンド/ボーイフレンドを探す</li>
 <li>人々にあなたの音楽を聞いてもらう</li>
 <li>あなたの音楽について話す</li>
 <li>他のミュージシャンに会う</li>
 <li>グッズを売る</li>
 <li>ビデオを通して音楽を教える</li>
 <li>あなたの猫の写真を公開する</li>
</ol>

<p>このシンプルなエクササイズ−−目標を作成し、並び替えること−−は意思決定をするうえでの助けになります。(これらの機能を実装し、これらのサービスを使用して、これらのデザインを作成しますか？)</p>

<p>これで、優先順位付けされた目標リストが作成されたので、次の質問に移りましょう。</p>

<h3 id="ウェブサイトを使ってどのように目標を達成する？">ウェブサイトを使ってどのように目標を達成する？</h3>

<p>あなたは目標のリストを持っており、それらの目標を達成するためにウェブサイトが必要だと感じます。本気ですか？</p>

<p>例を振り返りましょう。音楽に関連する 5 つの目標があります。私生活に関連した1つの目標 (あなたの重要な他者を見つけること)、そして全く無関係の猫の写真です。これらすべての目標をカバーするために単一のウェブサイトを構築することは合理的ですか？それも必要ですか？結局のところ、既存のウェブサービスのスコアは、新しいウェブサイトを構築せずにあなたを目標に導くかもしれません。</p>

<p>ガール/ボーイフレンドを見つけることは、まったく新しいサイトを構築するのではなく、既存のリソースを使用することが理にかなっている主要なケースです。どうして？なぜなら、実際にガール/ボーイフレンドを探すよりも、ウェブサイトの構築と保守に多くの時間を費やすからです。私たちの目標は最も重要なものなので、ゼロから始めるのではなく、既存のツールを活用することに力を注ぐべきです。繰り返しになりますが、写真を紹介するためにすでにたくさんのウェブサ ービスが用意されているので、新しいサイトを構築するだけの価値はありません。</p>

<p>他の 5 つの目標はすべて音楽に関連しています。もちろん、これらの目標に対応できるウェブサービスは数多くありますが、この場合は専用のウェブサイトを構築することが理にかなっています。このようなウェブサイトは、私たちが 1 つの場所 (目標 3,5、および 6 に適しています) に公開し、私たちと公共の間の交流を促進する (目標2 と 4 に良い) すべてのものを集約する最良の方法です。一言で言えば、これらの目標はすべて同じトピックを中心にしているため、すべてを 1 か所にまとめて目標を達成し、フォロワーが私たちとつながるのを助けます。</p>

<p>ウェブサイトはどのように私の目標を達成するのに役立ちますか？それに答えることによって、あなたの目標に到達し、無駄な労力から自分自身を救う最良の方法を見つけることができます。</p>

<h3 id="目標を達成するために何をどのような順序で実行する必要がありますか？">目標を達成するために何をどのような順序で実行する必要がありますか？</h3>

<p>あなたが達成したいことが分かったら、今度はその目標を実行可能なステップに変えてください。副題として、あなたの目標は必ずしも石で設定されているわけではありません。プロジェクトの中でも、予期せぬ障害物が横切ったり、心が変わったりしても、時間の経過と共に進化します。</p>

<p>長い説明をするのではなく、この表の例に戻ってみましょう。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">目標</th>
   <th scope="col">すべきこと</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="vertical-align: top;">人々にあなたの音楽を聞いてもらう</td>
   <td>
    <ol>
     <li>音楽を録音する</li>
     <li>オンラインで使用可能なオーディオファイルをいくつか準備します (既存のウェブサービスでこれを行うことができますか？)</li>
     <li>あなたのウェブサイトのどこかであなたの音楽に他の人がアクセスできるようにする</li>
    </ol>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">あなたの音楽について話す</td>
   <td>
    <ol>
     <li>ディスカッションを始めるためにいくつかの記事を書く</li>
     <li>記事の外観を定義する</li>
     <li>それらの記事をウェブサイトに公開する(これを行う方法は？)</li>
    </ol>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">他のミュージシャンに会う</td>
   <td>
    <ol>
     <li>他の人があなたに連絡する方法を提供します (E メール？Facebook？電話？手紙？)</li>
     <li>人々があなたのウェブサイトからそれらの連絡先チャンネルをどのように見つけるかを定義する</li>
    </ol>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">グッズを売る</td>
   <td>
    <ol>
     <li>グッズを作る</li>
     <li>グッズを保管する</li>
     <li>配送を処理する方法を見つける</li>
     <li>支払いを処理する方法を見つける</li>
     <li>あなたのサイトに人々が注文するためのメカニズムを作ります</li>
    </ol>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">ビデオを通して音楽を教える</td>
   <td>
    <ol>
     <li>ビデオレッスンを録画する</li>
     <li>オンラインで表示可能なビデオファイルを準備します (これも既存のウェブサービスで可能ですか？)</li>
     <li>あなたのウェブサイトのどこかであなたのビデオに他の人がアクセスできるようにする</li>
    </ol>
   </td>
  </tr>
 </tbody>
</table>

<p>気づくべき 2 つのことがあります。第1 に、これらのアイテムの一部はウェブ関連 (例えば音楽を録音し、記事を書く) ではありません。これらのオフライン活動は、プロジェクトのウェブ側よりも重要な役割を果たすことがよくあります。たとえば、販売では、人々が注文するウェブサイトを構築するよりも、供給、支払い、出荷を処理する方がはるかに重要で時間がかかります。</p>

<p>第2 に、実行可能なステップを設定することで、答える必要がある新しい質問につながります。通常、当初考えていたよりも多くの疑問が出てきます。(例えば、これをすべて自分で行う方法を学ぶべきか、誰かにそれをさせるか、サードパーティサービスを使用するように頼んでください)。</p>

<h2 id="結論">結論</h2>

<p>ご覧のとおり、「ウェブサイトを作ってみたい」というシンプルなアイデアでも、考えれば考えるほど ToDo リストが長くなっていきます。嘆きたくなるでしょうが、パニックになる必要はありません。すべての質問に答える必要も、リストの項目の全てを行う必要もありません。大切なことは、あなたは何がしたくて、どのように到達するかというビジョンを持てるかどうかなのです。クリアなビジョンを頭に入れたら、それをいつ、どのように行うかを決める事が必要です。 簡単にはできないような大きなタスクは、実行可能な小さなステップに分割しましょう。小さなステップを一つずつこなすことで、ついには大きな成果を達成することができるでしょう。</p>

<p>この記事から、ウェブサイトを作成するための大まかな計画を立てることができるはずです。次の記事は、<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>です。</p>