"AIを活用したゼロからのウェブサイト制作と学習の一体化:初心者向けアプローチ"
はじめに（作者について）ポートフォリをサイト：tomoyakimura.com
私は日本の国立大学法人宇都宮大学を修了し、同大学の大学院で学んできました。設計事務所での経験を活かし、建築意匠設計、空間デザイン、家具デザインといった多様なデザイン分野に深い興味と熱意を育ててきました。私のデザインの哲学は、機能と美のバランスを追求し、その結果としてユーザーに豊かな体験を提供することです。各プロジェクトでは、問題解決を優先しながら、その空間や製品を利用する際の人々の感情や経験を考慮に入れた設計を行っています。
AIの進歩はデザインの学習過程を効率化し、私自身もこのような最新の技術を活用してデザイン領域を拡大してきました。現在では、建築だけでなく、多岐にわたるデザインを一体化して考える段階に至っています。その中で私が積み上げてきた経験やアイデアを形にして多くの人に発信することができるよう、ポートフォリオサイトを作成しました。
私が制作したポートフォリオサイトは、これから紹介する方法を用いて作成しました。そのため、これから紹介する内容を理解すれば、初心者でも自分のwebサイトを作成することができると思います。今回の重要なポイントは「AIを用いた制作と学習の一体化」です。そのため、自身のwebサイトを作成する時にはすでにwebデザインの基礎を理解している状態になれると思います。
1.使用するツールの概要
以下に示すツールは必ずしも、これでなければいけないものではありません。
概要を説明するので、適宜代用したり省いたりして構いません。
1.Atom
費用：無料
概要：オープンソースのテキストエディタで、プログラミングやコーディングに特化しています。カスタマイズ性が高く、さまざまなプラグインやテーマを使用して好みに合わせることができます。webページを作成するHTML、CSS、JavaScript
を書き込むのに使用します。
2.ChatGPT
費用：無料（3.5のみ4.0以降は月20ドル）
概要：OpenAIが開発した自然言語処理のモデルです。大規模なテキストデータを学習し、人間のような対話を模倣することができます。質問に答えたり、会話を進めたりすることができます。このツールは必ず必要になります。わからないことや、実装したい機能があればここで質問しコードを代わりに書いてもらいます。
3.Midjourney
費用：10ドル/月(basicプラン)
概要：テキストの説明文から画像を作成する独自の人工知能プログラムです。webデザインのテンプレートを作成するのに役立ちます。
3.Adobe Photoshop,Adobe Illustrator,Adobe XD
費用：Creative Cloudコンプリートプラン 6,480 円/月 (税込)
いくつかプランがあります。必要なものを選択してください。
概要：
Adobe Photoshop
画像編集やグラフィックデザインに特化したソフトウェアです。写真の修正や合成、イラスト制作など、さまざまなクリエイティブな作業に利用されます。
Adobe Illustrator
ベクターベースのグラフィックデザインソフトウェアです。ロゴやアイコン、イラストの作成に適しており、スケーラブルなイメージを作成することができます。
上記２つのソフトはここでは取り扱いません。画像編集やロゴ制作にお使いください。ロゴ制作には後半に記述する、Midjourneyが活用できます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
Adobe XD
ユーザーインターフェイス（UI）/ユーザーエクスペリエンス（UX）デザインのためのソフトウェアです。プロトタイプ作成やワイヤーフレームの作成、デザインの共有など、デザイナーと開発者のコラボレーションをサポートします。
4.File Zilla
費用：無料
概要：FTP（ファイル転送プロトコル）クライアントソフトウェアです。サーバーとのファイルのやり取りやアップロード、ダウンロードを行うためのインターフェースを提供します。ウェブ開発者やシステム管理者によく利用されます。
5.sitemaps
費用：無料
概要：ウェブサイトのサイトマップ作成を支援するオンラインツールです。
サイトマップは、ウェブサイトの階層構造やページの関係を示すために使用され、SEO（検索エンジン最適化）やクローラーによるウェブサイトのインデックス作業に役立ちます。
2.webデザインの基本構成(AIを使用する前の前提知識)
1.ドメイン名
ドメイン名は、インターネット上の位置を示すためのユニークな名前です。ウェブサイト、電子メールサーバー、または他のWebサービスを識別するために使用されます。ドメイン名はIPアドレス（例：192.0.2.1）に対応していますが、人々が覚えやすい名前を提供するために使用されます。
ドメイン名は通常、"."（ドット）で区切られた一連の部分から成り立っています。例えば、"www.example.com"というドメイン名では、各部分は以下のように理解されます：
www：これは一般にウェブサーバーを示すもので、「World Wide Web」の略です。しかし、現代のウェブサイトでは、"www"を省略することも一般的です。
example：これはサブドメインです。個々のウェブサイトを識別します。
com：これはトップレベルドメイン（TLD）です。これはウェブサイトの種類を示し、一般的には.com（商業）、.org（組織）、.gov（政府）、.edu（教育）などがあります。国別コードトップレベルドメイン（ccTLD）も存在し、特定の国や地域を示します（例えば、.jpは日本、.ukはイギリス）。
ドメイン名を使用するには、一般的にはドメイン名登録業者から購入します。ドメイン名はユニークである必要があり、世界中で1つしか存在しないため、所望のドメイン名がすでに他の誰かによって登録されていないことを確認する必要があります。また、ドメイン名は通常、年間契約でレンタルされ、契約が更新されないと名前が失われる可能性があります。
ドメイン名は、ウェブサイトのブランドを強化し、ユーザーがサイトを簡単に見つけて覚えることができるようにする重要なツールです。
webを作成してからで結構なので、実装する時期になってから取得してください。
おすすめ
2.webサーバー
Webページをホストし、ユーザーがアクセスするためのインターネット上のコンピューターまたはコンピューターシステムです。ユーザーがWebサイトのURLをブラウザに入力すると、ブラウザはそのWebサイトのデータをホストしているWebサーバーに接続します。webサイトを表示するにはwebサーバーにアップロードする必要性があります。通常webサーバーを借りて（月額1500円〜）アップロードします。お名前.comでドメインと一緒に購入することが出来ます。
3.HTML (HyperText Markup Language)
Webページの基本的な構造を定義するマークアップ言語。テキスト、リンク、画像などの要素を配置するために使用されます。
HTMLの基本構成はこのようになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です。</p>
</body>
</html>
<!DOCTYPE html>: この宣言は、文書がHTML5で書かれていることをブラウザに知らせます。あまり考える必要はないです。
<html>: これはHTML文書全体を囲むルート（根）要素です。
<head>: この要素はメタ情報（文書のタイトル、文字コード、スタイルシートのリンクなど）を含むためのものです。この内容は通常、ブラウザのタブに表示されるタイトルとして使用されますが、直接的にはページの表示に影響しません。
<title>: この要素はウェブページのタイトルを設定します。これはブラウザのタブ、ブックマーク、検索エンジン結果などで使用されます。
<body>: この要素はウェブページの主要なコンテンツを含みます。テキスト、画像、リンク、フォーム、ビデオなどを含むことができます。
<h1>: これは見出し要素で、1から6までの数字を使用して異なるレベルの見出しを作成できます。<h1>は最も重要な見出し（通常はページの主要なタイトル）を表し、<h6>は最も重要性の低いことを表します。
重要なのは基本的にwebに表示される順番（上から）から<body>の中に書き込んでいくことだけです。
4.CSS (Cascading Style Sheets)
CSS（Cascading Style Sheets）は、ウェブページのスタイルやレイアウトを制御するための言語です。HTMLがウェブページの構造と内容を定義するのに対して、CSSはその見た目と表示方法を定義します。
セレクタとプロパティ: CSSのルールセットは一つ以上のセレクタと、そのセレクタに対応するプロパティのブロックで構成されます。セレクタはスタイルが適用されるHTML要素を定義します。プロパティブロックは中括弧{}で囲まれ、その中には一つ以上のプロパティと値のペアが含まれます。例えば、h1 { color: blue; }というCSSルールは、すべてのh1要素のテキスト色を青に設定します。
カスケーディング: CSSの「カスケーディング」とは、複数のスタイルルールが一つのHTML要素に適用される場合に、どのルールが優先されるかを決定するメカニズムを指します。一般的には、より具体的なセレクタ、後に定義されたルール、またはユーザーエージェントスタイルシートよりも作者スタイルシートが優先されます。
レイアウトとデザイン: CSSはレイアウトの調整、テキストスタイルの適用、背景色やイメージの設定、ボックスモデルの制御（要素のマージン、ボーダー、パディング、コンテンツのサイズ）、アニメーションの作成など、ウェブページの視覚的要素全体を制御します。
レスポンシブデザイン: CSSはメディアクエリを使用して、異なるデバイスや画面サイズでのウェブページの表示を調整するレスポンシブデザインをサポートしています。これにより、ウェブサイトはデスクトップ、タブレット、モバイルデバイスなど、さまざまな環境で適切に表示されます。
フレームワーク: CSSフレームワーク（Bootstrap、Foundationなど）は、既にスタイルが定義されたコンポーネントの集合体で、ウェブデザインのスピードと効率を向上させます。
CSSはウェブデザインにおいて重要なツールであり、ウェブページの外観をカスタマイズし、ユーザーエクスペリエンスを向上させるために使用されます。重要なのは「レスポンシブデザイン」です。設計時にはレスポンシブデザインを意識することを心がけてください。レスポンシブデザインをうまく適用させると様々な環境で適切に表示されるだけではなく、のちに記述するSEO対策に重要な考えとなります。
5.JavaScript
Webページに動的機能を追加するためのスクリプト言語。ユーザーとのインタラクション、アニメーション、フォームの検証などに使用されます。初めのうちは、あまり使うことはないと思いますが覚えといてください。
6.ブラウザ
ユーザーがWebサイトを表示、ナビゲート、対話するためのソフトウェアツール。Chrome、Firefox、Safariなどがあります。
以上がWebの基本構成になります。
3.webデザインのレイアウトを練る
今まで、webデザインのレイアウトはwebで検索したり、Pinterestでデザインを探すくらいしか方法がありませんでした。今回はそれらの方法はあえて説明しません。他の方法を紹介します。
1.AIを使ってみる
冒頭に紹介したMidjourneyは自然言語の説明（「プロンプト」と呼ばれる）から画像を生成します。すなわち、文章を打ち込むことでそれを画像に変換してくれる機能です。Midjourneyを用いることでwebサイトのテンプレートを作成することが出来ます。
以下に生成してみた、webサイト４パターンです。
プロンプト内容
create a website for showcasing the portfolio of a designer who specializes in architecture and furniture. The works are arranged in two columns, organized chronologically, and there are branching sections where the works are displayed. The design should be simple.--q 4 --ar 1:6 --v 5.1
Midjourneyの機能を説明します。
MidjourneyはDiscordというアプリを通してチャットbotとの会話で行われます。
チャットbotのdmを開いてから、「/image」と打ち込むとprompt:と出てくるのでその隣からプロンプト（生成したいものの特徴）を打ち込むことで生成することが出来ます。
ここでMidjourneyの隠れたコマンド機能を紹介します。
紹介したプロンプト内容の文末に--q 4 --ar 1:6 --v 5.1と記載されているかと思います。
それぞれのコマンドは以下のような意味合いを持ちます。
--q 4：これは"quality"を意味を表しており、画像の品質レベルを指定します。この場合、品質レベルは4です。特に理由がなければ4に設定してください。現時点で最新バージョンです。（2023/05/22）
--ar 1:6："ar"は"aspect ratio"（アスペクト比）を意味し、画像の幅と高さの比率を指定します。この場合、アスペクト比は1:6です。これによりwebページに対応できるように縦長にすることが出来ます。
--v 5.1："v"は"version"（バージョン）を意味し、使用するAIモデルのバージョンを指定します。この場合、バージョンは5.1です。現時点で最新バージョンです。（2023/05/22）
プロンプト内容は日本語でも機能するようですが、出来るだけ英語がいいと思います。自信がなければ、翻訳アプリを用いたり、冒頭に紹介したChatGPTで翻訳してみてください。
また、Midjourneyは一度に4枚の画像を生成します。画面の下にU1,V1と書いてあるのが見えると思います。これは、左上、右上、左下、右下の順番で数字が振ってあり、Uを押すと指定した番号の画像1枚を生成し、Vを押すと指定した番号の画像を元に４つの異なる画像を生成することを意味しています。
2.Adobe XDを用いてプロトタイプを作成する。
XDはwebデザインのプロトタイプを作成するのに役立つ機能です。
Midjourneyで生成したウェブデザインのテンプレート画像(Uを押して指定した番号の画像1枚にしてください)をAdobe XDに添付し、プロトタイプを作成します。以下にその手順を説明します。
生成した画像を保存： Midjourneyからの出力画像を適切に保存します。
Adobe XDを開く： Adobe XDを開き、新しいプロジェクトを開始します。
画像をインポート： Adobe XDで「File」メニューを開き、「Import」を選択します。次に、Midjourneyで生成した画像を選択し、インポートします。
画像を配置： Adobe XDのキャンバス上で画像を配置し、サイズや位置を調整します。これはウェブデザインの基本的なレイアウトを形成します。
コンポーネントを追加： Adobe XDのツールを使用して、ボタン、テキストボックス、リンクなどのコンポーネントを追加します。これらのコンポーネントは、Midjourneyで生成した画像の上に配置され、インタラクティブな要素を提供します。
プロトタイピング： Adobe XDのプロトタイピングモードに切り替え、ページ間の移動やインタラクティブな要素の動作を定義します。難しかったら、できるとこまでで大丈夫です。
テストと反復： プロトタイプをテストし、必要に応じてデザインを調整します。Adobe XDは直感的なインターフェースを持っているため、変更を加えるのは比較的簡単です。
共有とフィードバック： 作成したプロトタイプを共有し、他の人からフィードバックを得ます。Adobe XDには共有機能が内蔵されているため、他の人とプロトタイプを簡単に共有することができます。
初めて使用する場合は、出来るとこまでで構いません。これはあくまでもプロトタイプでありwebサイトの作成とは関係がないので、作り込みすぎないことを意識してください。
上記の画像はテンプレートの例です。
全ての機能を備えた、プロトタイプを作成する必要はありません。
補足ですが、一般的にWebデザインのレイアウトを練る際には、以下のステップを考慮すると良いと思います。
目的の明確化: 最初に、ウェブサイトの目的をはっきりさせます。それは商品の販売、情報の提供、ブランドの認知度向上など、様々な目的が考えられます。この目的を明確にすることで、レイアウトの方向性を決定する手助けになります。
ターゲットユーザーの理解: ターゲットユーザーのニーズ、期待、行動パターンを理解することは、適切なレイアウトを作成するために重要です。ユーザーがサイトをどのように利用するか、どのような情報を探しているかを理解することで、それを反映したレイアウトを作ることができます。
コンテンツの準備: レイアウトを練る前に、ウェブサイトに掲載する主要なコンテンツを準備します。コンテンツはレイアウトに大きな影響を与え、どのように情報を提示するかを決定します。
ワイヤーフレームの作成: ワイヤーフレームはウェブページの基本的なレイアウトをスケッチするための道具です。主要な要素（ヘッダー、フッター、コンテンツエリア、ナビゲーションなど）を配置し、ページがどのように機能するかを視覚化します。
グリッドシステムの利用: グリッドシステムはデザインの一貫性と整理を支援します。それはページを一連のマージン、パディング、カラムに分割し、要素を均等に配置するのに役立ちます。
レスポンシブデザイン: さまざまなデバイス（デスクトップ、タブレット、モバイル）で適切に表示されるように、レスポンシブデザインを考慮することが重要です。これはメディアクエリを使用してCSSを調整することで達成されます。
ユーザーテスト: レイアウトが完成したら、ユーザーテストを実施します。実際のユーザーがサイトをどのように利用するかを観察し、レイアウトの調整や改善を行います。このフィードバックは、ウェブサイトのユーザビリティとエクスペリエンスを向上させるのに非常に価値があります。
これらのステップは一般的なガイドラインであり、プロジェクトによっては異なる手順や追加のステップが必要となる場合もあります。ウェブデザインはクリエイティブなプロセスであり、最も重要なのはユーザーのニーズを満たすことです。
4.コードを書いてみる
この記事はコードを書いたことがない、初心者でよくわからない人をターゲットに書いています。コードと聞くと難しい様に聞こえますがあまり難しく考えなくても大丈夫です。なぜなら、基本的にコードを書くのは私たちではなくChatGPTだからです。
しかし、いくらChatGPTとはいえ何でもかんでも出来るわけではありません。
以下の点に注意してください。
1.段階的な設計：まず、ウェブサイトの全体像を描くことから始めます。どのような機能が必要か、それらがどのように相互作用するかを理解しましょう。それから、それらの要素を一つずつ作成していき、全体を組み立てることが重要です。すべてを一度に行おうとすると、問題が発生した場合に特定するのが難しくなる可能性があります。
2.テスト：新しい機能を追加するたびに、それが正しく動作することを確認するためにテストを行います。エラーは小さいうちに修正することが最善であり、大規模な問題に発展する前にそれらを特定することができます。
3.具体的な情報：特に技術的な問題やエラーについて質問する場合、可能な限り多くの情報を提供すると良いです。例えば、エラーメッセージの全文、問題が発生した状況、既に試した解決策などを提供してください。ただし、関係のないコードはわかる限り省くべきです。
4.継続的な会話：ChatGPTは一度に一つのメッセージを処理しますが、それは前のメッセージのコンテキストに基づいています。したがって、会話を続けることで、より深い議論や問題解決につながることがあります。しかし、何度も修正されることでエラーが連鎖する場合もあります。その際は新しいスレットをたててください。
1.Atomをインストールしてコードを作成する手順
まずは冒頭のツール概要からAtomをダウンロードしてください。
Atomを開く：まず、Atomを開きます。Windowsではスタートメニューから、macOSではDockまたはApplicationsフォルダからアクセスできます。
新しいファイルを作成する：Atomを開いたら、メニューバーの「File」をクリックし、「New File」を選択します。もしくは、キーボードショートカットを使用することもできます。WindowsとLinuxではCtrl + N、macOSではCmd + Nを押します。
コードを書く：新しいファイルが作成されたら、そのファイルにコードを書くことができます。Atomは多くのプログラミング言語をサポートしており、シンタックスハイライトや自動補完機能を提供しています。
ファイルを保存する：コードを書いたら、ファイルを保存します。メニューバーの「File」をクリックし、「Save」を選択します。または、キーボードショートカットを使用します。WindowsとLinuxではCtrl + S、macOSではCmd + Sを押します。保存する際には、ファイル名と保存する場所を指定します。
ファイルを保存することを忘れないでください。ファイルを保存しなければ、webページは更新されません。
保存したら、デスクトップからファイルを探し、htmlファイルをクリックします。そうするとwebページのテスト画面を見ることができるようになります。まだ、テスト画面なので他の端末で検索しても表示されないので注意してください。
2.実際にコードを記述する
今回、HYML,CSS,JavaScriptなどの機能を用いる方がいると思います。それぞれには実はファイルを作成する際にファイル名の語尾にそれぞれ「.html」「.css」「.js」と記述する決まりがあります。そうしなければ、どの言語を用いているのか理解できないためです。ファイル名も命令すれば、ChatGPTは記述してくれるかと思います。ただし、最初のwebページの最初の画面になるHTMLファイル名は「index.html」に統一してください。複数のページが存在する場合、どのファイルを初めに開けば良いのか機械が判断できないからです。
3.2でAdobe XDを用いてプロトタイプを作成しました。
プロトタイプを見るといくつかのボックスに分かれたかと思います。その要素を一つタッチしてみてください。
そうすると、右側にその要素の詳細が表示されるようになりました。
画像ではヘッダーとなる部分の詳細情報が表示されています。右側詳細の変形という欄にW1635px,H116pxと書いてあると思います。Wはwebサイトの横幅、Hは高さを表しています。
そのため、ChatGPTを開いたら、「Webサイトの上部にヘッダーW:1635px,H:116pxになるように配置したい。HTMLとCSSを書いて」と命令したくなります。
しかし、ここで思い出して欲しいのが、2.4の「CSS」で記述した、レスポンシブデザインという考え方です。W1635pxにしてしまうと、PCでは正しく表示されたとしても、PadやiPhoneでは、はみ出してしまいます。そのため、正しくは
ChatGPTを開いたら、「Webサイトの上部にヘッダーをW:auto,H:116pxになるように配置したい。HTMLとCSSを書いて」と命令するべきなのです。autoに設定することで高さだけ維持したまま、横幅を自動的に変化させることができる様になります。ここで取り上げているのは、かなり簡単な場合なので自分で間違えに気づくと思いますが、複雑になってくるとChatGPTへの質問内容次第で全く異なる結果を導いてしまうことに成りかねません。
このような要領で、写真やボタンを1つずつ質問しながら配置してみてください。
そのほかにも、ドロップシャドウの数値であったり、カラー、透明度などの欄があります。プロトタイプで作成していた場合は、その数値データをChatGPTにその都度、送信してみてください。
これでChatGPTにより詳細な情報を渡すことが可能に成ります。
コードの書き方は以上です。ここから先はそれぞれが違うwebデザインを実装すると思うからです。これだけと思う方がいるかもしれませんが、重要なのは全てをChatGPTに投げかけるのではなく、「このコードは色を変更するのか」、「こうすれば配置できるのか」とAIと一緒に理解することなのです。ChatGPTに何度も投げかけて作成しているうちにコードの基本を理解することができるようになると思います。
3.どうしても上手くいかなかったら
どうしても上手く、いかないときこんな事を試してみてください。
独立したデモファイルを作成する：実装したい機能や修正したいバグに関連する最小限のコードを含む新しいデモファイルを作成します。これにより、他のコードから影響を受けずに機能や修正をテストすることができます。
オンラインで調査する：Stack OverflowやMDN Web Docsなどの開発者向けリソースを使って問題を調査します。特定のプログラミング言語やフレームワーク、問題を簡潔に説明するキーワードを含めると良い結果が得られやすいです。「Stack Overflow {使用プログラミング言語} {実装したい内容}」 と英語で調べると出てきやすいです。
ドキュメンテーションを読む：使用しているツールやフレームワーク、ライブラリの公式ドキュメンテーションを読むことは非常に重要です。これらのドキュメンテーションは、使用方法、ベストプラクティス、トラブルシューティングのガイドなど、価値ある情報を提供しています。
デバッグする：デバッガを使用してコードをステップバイステップで実行し、問題が発生している箇所を特定します。変数の値を監視し、コードの実行パスを追跡します。
コミュニティに質問する：Stack OverflowやGitHubのIssue、専門的なフォーラムやディスカッションボードなどで質問を投稿します。質問を明確にし、何を試したか、どのようなエラーが発生したかなど、具体的な情報を提供します。
コードのバージョンを確認する：使用しているライブラリやフレームワークのバージョンが最新であることを確認します。また、そのバージョンが問題の発生に影響を与えていないか確認します。
これらの手順を試すことで、ほとんどの問題は解決できるはずです。それでも問題が解決しない場合は、私のサイトのContactから質問してください。
基本的に1回で全てが上手くいくことはありません。ステップバイステップで諦めないことが大切です。上手くいった方は、ChatGPTでファビコンを実装してみてください。また、世界中の公開されているコードは全て閲覧することが可能です。
ぜひ調べて参考にしてみてください。
5.webページを実装する
1.基本ステップ
まず、Webページを公開するための基本的なステップは以下のとおりです：
Webページの作成： まずはHTML, CSS, JavaScriptなどを使ってWebページを作成します。すでにある場合はこのステップは不要です。
ドメインの購入： Webページを公開するためには、自分のWebサイトのアドレスを表すドメイン名が必要です。たくさんのドメイン登録業者がありますので、その中から選んで購入します。ドメイン名は一般に年単位でレンタルする形になります。
ホスティングサービスの選択： ホスティングサービスは、あなたのWebサイトのデータを保管し、ユーザーがアクセスできるようにするサービスです。いくつかの種類があります：共有ホスティング、VPS（Virtual Private Server）、専用サーバー、クラウドホスティングなど。あなたのWebサイトのニーズに応じて適切なものを選びます。
Webページのアップロード： FTP(File Transfer Protocol) や SSH(Secure Shell) を利用して、作成したWebページをホスティングサーバーにアップロードします。これには適切なソフトウェア（FTPクライアントなど）が必要です。サーバーにファイルをアップロードするには、ホスティングサービスから提供されたログイン情報（ホスト名、ユーザー名、パスワードなど）が必要です。
ドメインとホスティングサービスの紐づけ： ドメイン名とホスティングサービスを紐づけるために、DNS（Domain Name System）設定を行います。これは通常、ドメイン登録業者のダッシュボードから行います。ホスティングサービスから提供されたDNSサーバーのアドレスをドメインに設定します。
Webページのテスト： 全ての設定が完了したら、自分のドメイン名をブラウザに入力してWebページが正しく表示されるか確認します。
まず、必要なのはドメインとサーバーです。
ドメインとはweb上での住所のようなもので貴方のサイトを見つけやすく成ります。私のポートフォリをサイトでは「tomoyakimura.com」を使用しています。
サーバーはpc上で作成したファイルをweb上で保管する場所を指しています。
webで開く際には、サーバーに保存されているデータを取り出す行為をしています。
私は2章でも記載した「お名前.com」を利用しました。ここでは、サーバーを購入することでドメインが１つ無料で付いてきます。
ドメインとサーバーを用意したら、「お名前.com」の説明に従いドメイン名とサーバーを紐づけます。しかし、「お名前.com」で両方同時に購入すればすでに紐付いて設定されていると思います。
2.File Zillaを使ってサーバーにアップロード
上記のサイトが大変参考になるかと思います。必要な情報は「お名前.com」のレンタルサーバーコントロールパネルにアクセスするとみることが出来るのでアップロードしてみてください。
全てが完了したら、ドメイン名で直接検索してみてください。
おめでとうございます。あなたのwebサイトが完成しました。
実践、SEO対策
SEO（Search Engine Optimization）とは、ウェブサイトやウェブページを検索エンジンの検索結果で上位に表示させるためのプロセスや技術のことを指します。具体的には、検索エンジンがウェブページの内容を理解し、関連性を判断してランキングするための最適化を行うことを目指します。
SEOの目的は、検索エンジンのアルゴリズムや基準に合致し、ユーザーの検索クエリに最も関連性の高いウェブページを表示させることです。高い検索エンジンランキングを獲得することにより、ウェブサイトへの有機的な流入を増やし、トラフィックやビジネスの成果を向上させることが期待されます。
具体的なSEOの手法や戦略は多岐にわたりますが、以下の要素が重要な役割を果たします
キーワードリサーチ: 検索クエリに関連したキーワードを特定し、それらをウェブページのコンテンツに適切に組み込むことで、検索エンジンに対してウェブページのテーマや関連性を伝えます。
コンテンツ最適化: 高品質で有益なコンテンツを提供し、キーワードや関連キーワードを適切に配置します。また、適切なタイトル、メタディスクリプション、見出しタグなどのHTML要素を使用します。
サイトのテクニカル最適化: ウェブサイトのロード速度、モバイルフレンドリー性、クローラへのアクセス性など、サイトのテクニカルな側面を最適化します。
リンクビルディング: 他のウェブサイトからの高品質なバックリンクを獲得し、ウェブサイトの信頼性と権威性を向上させます。
ユーザーエクスペリエンス: ユーザーがウェブサイトで快適な体験を得るために、ナビゲーションの改善、使いやすさの向上、コンテンツの読みやすさなどを重視します。
1.挑戦してみよう
ここまで出来たなら、実装できると思います。
挑戦してみてください。
・SSL証明書の入手
ウェブサイトのセキュリティと暗号化通信を確保するために使用されるデジタル証明書です。SSL証明書は、ウェブサイトとユーザーの間の通信を暗号化し、データの機密性と完全性を保護します。
・Googleアナリティクスでサイト分析
Webサイトを発展させるのに役立ちます。
・webサイトのタイトルと補足説明
検索時に表示されるように成ります。
・site mapの作成
ファイルの中にsite mapを制作するとボットがあなたのサイトを見つけやすくなります。
冒頭に紹介してるので、作成してみて下さい。
最後に
ここまでご覧いただき、本当にありがとうございます。少しでもお手助けできたなら幸いです。もしよろしければ、私のウェブサイトのContactページから感想やご意見をいただけると嬉しいです。不満や改善点など、どんなご意見でも構いません。これからの活動に反映させていただきます。
本当にありがとうございました。
この記事が気に入ったらサポートをしてみませんか？