2025 FRI

10.10

LEARN

2025.09.24

WordPressテーマ制作ロードマップ- IT初心者が1からWEBマガジンを作った話 –

こんな方におすすめ。

○WordPressでテーマ開発に挑戦してみたい方
○「デザインからコード作成まで全部自分でやってみたい!」というちょっと変わり者な方
○「世界にひとつだけのオリジナルサイトを作る」という言葉にロマンを感じる方
○WEBディレクターやWEBマーケターなど、幅広くWEB制作の知識を身につけたい方
○将来IT業界・WEB業界を目指す就活生・大学生

目次
  1. 概要と前提
    1. 前提①:本当にやりたいことは「サイト制作」?
    2. 前提②:WordPressはCMS(コンテンツ管理システム)
    3. 前提③:読み物として楽しく、実体験ベースで
    4. コラム:小説家・西加奈子さんの言葉
  2. なぜこの時代に1からWordPressのサイトを作ろうと思ったのか
    1. 理由1:仕事の為になりそうだったから
    2. 理由2:オリジナルのWEBマガジンを作りたかったから
    3. 理由3:サイト自体が自己紹介書・ポートフォリオになると思ったから
    4. コラム:「白ごはん.com」と「北欧、暮らしの道具店」
  3. WordPressテーマ開発ロードマップ
    1. STEP1:メニュー/コンセプト決め(所要時間:1週間程度)
    2. STEP2:デザインの学習(所要時間:1ヶ月程度)
      1. ①デザインの知識を学ぶ
      2. ②デザインツールを学ぶ
    3. STEP3:実際にデザインを起こしてみる(所要時間:1ヶ月程度)
      1. ①私が実際に作ったデザイン
      2. ②参考にしたサイト
      3. ③素材(イラストやロゴ・画像など)の集め方
    4. STEP4:HTML/CSS(+JavaScript)の基礎学習をする。(所要時間:1~2ヶ月程度)
    5. STEP5:Wordpressの仕組みを学ぶ(所要時間:1~2ヶ月程度)
    6. STEP6:いざ、実装!(所要時間:3ヶ月〜)
      1. ①サイトの”見た目”を作る
      2. ②Wordpress(管理画面)と連動するようにする
      3. ③サイトの公開
  4. 最後に:ゼロから作ったサイトは、愛着が段違い
  5. \関連書籍/

text:@raytokimatsu

概要と前提

ロードマップの説明に入る前に、まず「WordPressのテーマ開発ってなに?普通のサイト制作とどう違うの?」という方に向けて、本記事の前提を整理しておきます。

前提①:本当にやりたいことは「サイト制作」?

この記事は「完全オリジナルのサイトを独力で作ってみたい!」という、ちょっと変わり者向けの記事です。

もし「面白いコンテンツを発信したい!」というのが目的なら、有料テーマを購入した方が圧倒的に効率的。
今の時代、YouTubeや各種SNSといった発信の場は無数にあります。わざわざゼロからWEBサイトを作る必要はないかもしれません。

また「デザイナーを目指したい」ならコードを書く必要はないですし、「エンジニアになりたい」ならプログラミングや最新技術の勉強に時間をかける方が建設的です。

やろうとしていることが本当に「サイト制作」でいいのか?
その点をまず立ち止まって考えてみてください。

サイト制作は地道で時間がかかる作業ですが、取り組んでみると楽しい世界です。ただ、その一歩を踏み出す前に「手段」として正しいかを確認してみると良いと思います。

前提②:WordPressはCMS(コンテンツ管理システム)

WordPressは代表的なCMS(Contents Management System)。「運用」や「更新」を前提としています。


CMSとは、専門知識がなくても管理画面から記事やページを更新できる仕組みです。

例えるなら―
CMSは「Cook Do」みたいなもの。
食材さえ用意すれば、あとは鍋やフライパンに入れるだけで美味しい料理ができあがる。そんなイメージです。

逆に言うと、更新する予定がないサイトなら、わざわざWordPressを選ぶメリットはほとんどありません。
一度しか作らない料理のために、タレを1から調合するようなものだからです。

「私はタレから作りたい!」という方は、Wordpressテーマ開発に向いているかもしれません。是非この記事を最後まで読んでみてください!笑

前提③:読み物として楽しく、実体験ベースで

この記事は以下の点を意識して書いています。

⚪︎初学者でも理解できること

⚪︎読み物としてワクワクできること

⚪︎自分の実体験をベースにしていること

というのも、自分が学び始めた当時、ネットにあったロードマップ記事は

⚪︎難しい専門用語だらけ

⚪︎読んでいてワクワクしない。

⚪︎結局高額な教材やスクールに誘導され実際にどんなサイトが完成するのか不明

…というようなものばかりで、「この通りに勉強して大丈夫かな?」と不安だったからです。

自分自身もまだまだ初心者ですが、「1からサイトを作るってちょっと面白そう」と思った方に向けて、コラムや豆知識なども交えながら、読み物としても楽しい記事にしました。

もちろん偉そうに語れる立場ではなく、デザインも開発もプロではないので、専門的な部分はおすすめ教材を紹介するにとどめています。

それでも「コンセプト検討 → デザイン → 構築 → リリース」まで一通りやってみた過程をロードマップとして残すことは、もしかしたら誰かの役に立つかもしれない―と思い、この記事を書くことにしました。

コラム:小説家・西加奈子さんの言葉

私の大好きな小説家・西加奈子さんの言葉に、こんなものがあります。

-小説の信頼できるところは1冊も「あなたを救いたい」と言っている本がない、それを目的に書かれた小説って私はないと思っていて、結果として誰かの救いになったりするだけであって、強制力もないし、これが正解だって言っているわけでもないし(中略)ただ作家が全力で書いた1冊の本に過ぎない。

(19:54~引用)

この言葉に背中を押されるように、できる限り素直に、そして全力で書き記していければと思います。

なぜこの時代に1からWordPressのサイトを作ろうと思ったのか

※改めて、「ロードマップを早く教えろ!」と言う方は「Wordpressテーマ開発ロードマップ」の項目まで進んでくださいね!

今の時代、Studioのようなノーコードサービスや、便利なWordPressテーマを使えば、誰でも手軽に綺麗なサイトを作ることができます。
それでもあえて「1から自分で作ってみよう」と思った理由を、ここで少し整理しておきます。

理由1:仕事の為になりそうだったから

私は2022年に新卒で、エンターテインメント系のWEBサイトを制作・運用・コンサルティングする会社に入社し、現在もWEBディレクターとして勤務しています。

WEBディレクターの主な仕事は、ものすごく簡単に言うと、

1.お客さんがどんなサイトを作りたいかを整理する
2.それを満たすようなデザインの作成をデザイナーに依頼する
3.コーダー(開発者)に実際に作ってもらう

―という流れを管理する、サイト制作の責任者です。

ただ当時の私は、プログラミングの「プ」の字も、デザインの「デ」の字も知らない状態。それで「責任者です」と言われても…と戸惑ったのをよく覚えています(笑)。

依頼する相手(デザイナーさん・コーダーさん)が何をやっているのかを少しでも理解しておく必要がある。そう思ったのが、最初の理由です。

理由2:オリジナルのWEBマガジンを作りたかったから

POPEYEBRUTUSといった雑誌が大好きで、漠然と「自分もいつかオリジナルのWEBマガジンを作ってみたい」という気持ちがありました。

どうせ作るなら、世界にひとつだけの、自分だけのかっこいいサイトを。
ゼロから手を動かしてコツコツ作ることにロマンを感じたのが、2つ目の理由です。

理由3:サイト自体が自己紹介書・ポートフォリオになると思ったから

働き方が多様化しているこの時代、ずっと1つの会社に所属し続けるケースは減ってきています。もちろん、ひとつの会社で長く働けるのは幸せなことだと思いますが、転職や独立といった選択肢を常に持っておくことも大切だと感じています。

転職の際には職務経歴書を提出するのが一般的ですが、そこでは表しきれない人柄や考え方があります。

それらをサイトを通じて伝えられれば、書類だけでは伝わらない部分まで知ってもらえる。

サイトそのものが自己紹介やスキルの証明になる。そう考えたのが、3つ目の理由です。

コラム:「白ごはん.com」と「北欧、暮らしの道具店

私がよく利用するレシピサイト「白ごはん.com」や、独自路線で運営を続けていまや売上高70億円に至ったECサイト「北欧、暮らしの道具店」も、実は最初は個人が1から立ち上げたサイトです。

ゼロから始めて、ここまで大きく育っていったなんて、ちょっとロマンを感じませんか?(笑)

各創設者のインタビューもとても面白いのでご紹介します。
年間2億PV「白ごはん.com」のレシピが、料理をつくる人に愛される理由。冨田ただすけさんに聞いてみた
「北欧、暮らしの道具店」が生まれるまで──代表×店長が振り返る、クラシコムの歩み(1) 2006年〜2010年社史

WordPressテーマ開発ロードマップ

前置きはこのくらいにして、ここからはいよいよ「WordPressテーマ開発ロードマップ」をご紹介していきます!

ロードマップ目次

:メニュー/コンセプト決め(所要時間:1週間程度)

STEP2:デザインの学習
(所要時間:1ヶ月程度)

STEP3:実際にデザインを起こしてみる
(所要時間:1ヶ月程度)

STEP4:HTML/CSS(+JavaScript)の基礎学習をする。
(所要時間:1~2ヶ月程度)

STEP5:Wordpressの仕組みを学ぶ
(所要時間:1~2ヶ月程度)

STEP6:いざ、実装!
(所要時間:3ヶ月〜)

※所要時間は人によって前後はあると思います。あくまで目安として。

まずは「どんなサイトを作りたいか」や「そのサイトを通じて何を実現したいか」を考えてみましょう。これがないと、途中でモチベーションが続かなくなる可能性があります。

※サイト運営まで見据えていなくても、「1からサイトを作って就職や転職のアピールにしたい」など、頑張るための目的は最低限必要だと思います。

モチベーションが落ちてきたときや、やめてしまいそうになったとき、「サイト制作を通じて何をしたいのか」を言語化しておくことが、一歩を踏み出す原動力になります。

では、具体的にどの程度まで考えておけば良いのか、という点ですが、この段階で足踏みしていても本末転倒なので、最低限以下が決まっていれば十分です。

①サイト名:必須
②サイトメニュー:必須
③コンセプト(サイトをどんな場所にしたいか):任意

もちろん、これらは途中で変わっても問題ありません。まだ決まっていなくても「サイト制作に興味がある!」という方は、そのままSTEP2に進んでも大丈夫です。

ただし、コンセプトを言語化しておくと、デザインやサイトの統一感が自然に生まれますし、行き詰まったときに立ち返る指針にもなるのでおすすめです。

私の例(TRAYLの場合)

○サイト名
TRAYL(トレイル)

○サイトコンセプト
TRAYL(トレイル)は、Trail(小道・痕跡・きっかけ・糸口)と、筆者の名前であるRayを組み合わせた造語です。

「誰かにとっての寄り道であり、筆者にとっての足跡」を重ねる場を目指しています。

ーMessage

TRAYLを通じて、私自身の人生の痕跡や思考の断片を、ひっそりと残していきます。

訪れてくださった方にとっては偶然入り込んだ小道に寄り道するような感覚で、

ときには一息ついて逃げ場になる場所として、
ときには新しい発見や気づきに出会える場所として、

存在していきます。

メニュー

①BOOK(本を読む)
②EAT(食べる)
③GALLERY(ギャラリー)
④LEARN(学ぶ)
⑤CULTURE(カルチャー)
⑥LIFE(生活する)
⑦VISIT(出かける・旅する)
⑧HOBBY(趣味)

※コンセプトについては「コンセプトの教科書」という書籍が大変勉強になります。ご興味のある方は「おすすめ書籍」の3冊目として紹介させていただいたのでぜひチェックしてみてください。

STEP2:デザインの学習(所要時間:1ヶ月程度)

コンセプト・メニューがざっくりでも良いので決まったら、それをもとに実際にサイトデザインを作っていきますが、その前準備として、デザインの学習をしましょう。

▼学習内容
①デザインの知識(任意)
②デザインツールの知識(必須)

①デザインの知識を学ぶ

デザインの勉強法はネット上にたくさん紹介されていますし、楽しく続けられる方法であれば何でも大丈夫です。
ここでは、私が実際に読んでよかった書籍を2冊ご紹介します。

\1冊目/
なるほどデザイン|筒井美希

画像クリックで商品詳細をご覧いただけます

\2冊目/
ノンデザイナーズ・デザインブック|Robin Williams

画像クリックで商品詳細をご覧いただけます

すでにある程度の知識がある方や、「作りたいサイト像が具体的に思い浮かんでいる」という方は、このステップを省略しても大丈夫です。

ただし基礎知識を持っていると、実際にデザインを作るときに「なんか綺麗にならない」という壁を突破するきっかけになります。
それに、デザインの勉強は純粋に楽しいです。せっかくなら一度触れておくことをおすすめします。

センスは知識から。

(※2)番外編としてもう1冊「融けるデザイン」という書籍もお勧めです。ご興味のある方は関連書籍からぜひチェックしてみてください。

②デザインツールを学ぶ

デザインツールには Adobe XDFigma がありますが、これから1から学ぶならFigmaがおすすめです。

理由はシンプル。みんな大好き 「無料」 だからです。

もちろん有料プランもありますが、今回のように個人で学習・開発する分には機能不足で困ることはまずありません。

学習は以下の教材がお勧めですが、自分に合った方法で一通りFigmaの基本操作をマスターしてみましょう。

STEP3:実際にデザインを起こしてみる(所要時間:1ヶ月程度)

ここまで来れば、Figmaを使って実際にデザインを作れるスキルが身についているはずです。

このステップは「どんなサイトを作りたいか」によって内容が大きく変わるため、ここでは私が実際に取り組んだことの中から以下の3点をご紹介します。

①私が実際に作ったデザイン
②参考にしたサイト
③素材(イラストやロゴ・画像など)の集め方

①私が実際に作ったデザイン

※画像クリックで下層ページ等含むデザインを実際のfigmaデータでご覧いただけます。

②参考にしたサイト

③素材(イラストやロゴ・画像など)の集め方

デザインを起こす際には、ロゴ・写真・イラストなどさまざまな素材が必要です。
ここでは私が普段使っている方法を4つご紹介します。

(1)自分で用意する

自分で写真を撮る、イラストを描くなど「自作する」のも一つの手です。

本サイトで使用している写真もすべて自分で撮影したものです。

(私が撮った写真はギャラリーにも載せておりますのでよろしければご覧ください。)

また、ロゴもfigmaを使用して自分で作成したものになります。(TRANSITさんの影響をかなり受けておりますが…苦笑)

(2)画像生成AIに作ってもらう

最近は画像生成AIの精度が非常に高く、ロゴやイラスト制作に活用できます。

ロゴ生成サービスなどもあるので、試してみる価値があります。

ぜひ活用してみましょう。

▼参考記事

(3)依頼・発注する

予算に余裕があれば、SNSで見つけた好きなイラストレーターさんに依頼したり、ココナラなどのスキルシェアサービスを利用するのもおすすめです。

AIでは出せない人間ならではの表現がありますし、何より愛着が湧きます。

(4)デザイン素材サイトを活用する

無料・有料問わず、さまざまな素材サイトがあります。

うまく活用しましょう!

このステップからは「自分で作る」フェーズに入るため、難しく感じるかもしれません。
ただし一番楽しい部分でもあります!

行き詰まったときは、STEP1で言語化した「コンセプト」を見直したり、自分の好きなサイトを参考にしたりすると前に進みやすくなります。

また、できればこの段階で誰かにデザインを見せてフィードバックをもらうと、より完成度が高まるはずです。

コラム:参考サイトやデザインの探し方

探し方①:WEBデザインのギャラリーサイトを活用する。

探し方②:Pinterestでキーワード検索

探し方③:書籍を活用する(関連書籍に各書籍のリンクを貼っております)

探し方④:自分が好きなものなんでも(ブランド・雑誌・芸能人・アーティストetc..)のホームページなどを参考にする

探し方⑤:AIを活用する
私がいうまでもなく、最近はAIの進化が著しいです。Glileo AIのような瞬時にUIを作成してくれるツールなどもありますので、活用しない手はありません。

STEP4:HTML/CSS(+JavaScript)の基礎学習をする。(所要時間:1~2ヶ月程度)

サイトのデザインが形になったら、早速構築!と行きたいところなのですが、ここで再度インプットのお時間です。

WEBサイト制作の基礎中の基礎である HTMLCSS を学びましょう。

補足:HTML/CSS/JavaScriptとは?
詳しくは後述の書籍や教材で学んでいただければ十分ですが、読み物としての理解のために簡単に説明させていただきます。


①HTML
HyperText Markup Language の略。ページ内に表示する要素を指定します。

②CSS
Cascading Style Sheets の略。HTMLで指定した要素に装飾(色をつける、余白をとるなど)をします。

③JavaScript
ページに動きをつけます。


……はい、呪文に聞こえますよね(笑)。

イメージとしてはアニメを作る過程に近いです。

「HTMLで要素を決め、CSSで装飾をし、Javascriptで動かす。」

とイメージだけざっくり押さえておきましょう。

\書籍派の方/
1冊で全て身につくHTML &CSSとWebデザイン入門講座|Mana

初心者の定番書籍。私も所持しており、安心の一冊です。

動くWebデザインアイディア帳|久保田涼子/杉山彰啓

JavaScriptのサンプル集がまとまっており、購入者専用の逆引きサイトも使えて便利です。

👇逆引きサイトはこんな感じ

💡ポイント
JavaScriptは範囲が広すぎるので最初から全部覚えなくてOK。サンプルをコピペして使うくらいで十分です。

\動画派の方/
HTML/CSS+JavaScriptをちゃんと学ぶ講座|ともすた

WordPressテーマ開発の際にこの方の教材を受講しました。本当に丁寧で、今から学ぶなら私もこれを選びます。

💡Udemyは定期的にセールを行っています!
数万円の講座が2,000円前後で購入できることもあるので、必ずセールを狙いましょう。
講師の配布するクーポンも探せば見つかります。

\アプリ学習派の方/
Progate

私も最初はここから始めました。電車の隙間時間などに気軽に学べるのが魅力です。
初期は無料プランもあるので、とにかく腰を上げるきっかけにおすすめです。

💡学習する上でのポイント
全部覚える必要はありません。

とにかく手を動かして「なるほど、こうやってサイトって作られるんだ」と感覚をつかめば十分です。

書籍や教材は、制作中に行き詰まったときに“辞書”として使いましょう。

特にJavaScriptは多機能すぎて、最初に全部やろうとすると高確率で挫折します(笑)。

今は生成AIもあるので、細かい文法はChatGPTに任せても大丈夫です。大事なのは「仕組みを理解すること」。気軽に学んで次のステップへ進みましょう。

STEP5:Wordpressの仕組みを学ぶ(所要時間:1~2ヶ月程度)

ここまででサイト制作の基礎は身につきました。
最後に、WordPressの仕組みを学んでいきましょう。

改めて、WordPressとは?

冒頭でも少し触れさせていただきましたが、

WordPressは代表的なCMS(Contents Management System)です。
管理画面から「タイトル」「本文」「サムネイル(見出し画像)」などを入力すると、自動的に体裁の整ったページを生成してくれる仕組みになっています。

もしページを更新するたびに毎回HTML/CSSを書いていたら大変ですし、扱える人も限られます。
そこで「型」をあらかじめ作り、更新時は基本情報の入力だけで済むようにする―これがWordPressの考え方です。

カレーで例えると…

わざわざスパイスを一から調合しなくても、市販のカレールーがあれば誰でも簡単にカレーが作れますよね。

WordPressの「型」も同じです。
ルーのように便利なベースを用意しておくことで、誰でも手軽にサイトを更新できるようになります。

そして、このルー(=基本情報を入れるだけでページを整えてくれる仕組み)を自分で調合する部分を学ぶのが、最後のステップになります。

📝 もっとCMSの基本から知りたい方は、ネットで「CMSとは」と検索すると詳しい記事がたくさん出てきます。

学習方法

ここまでと同じく、自分に合った教材を使えば大丈夫です。

ここでは、私が実際に使って「これはわかりやすい!」と強く感じた教材を1つご紹介します。

WordPressのテーマ開発を1から丁寧に解説してくれているので、初学者でも安心して取り組めると思います。

ちゃんと学ぶ、WordPress テーマ開発講座|ともすた

STEP6:いざ、実装!(所要時間:3ヶ月〜)

ここまで来たら、あとは学んだ知識を活かして ひたすら手を動かすのみ です。
ここが一番大変で、一番楽しいステップになります。

進め方は人それぞれですが、以下の流れで取り組むと挫折しにくく、スムーズに進められると思います。

▼オリジナルサイト制作の大まかな流れ
①サイトの”見た目”を作る
②Wordpress(管理画面)と連動するようにする
③サイトを公開する

※ここからは少し専門的な用語も出てきますが、これまでの学習で十分理解できるはずです。
もしつまずいたら調べたり、AIに聞いたりしてください。調べる力もまた、サイト制作に欠かせないスキルです。

①サイトの”見た目”を作る

STEP3で作ったデザインを、STEP4で学んだ知識を総動員して形にしていきます。
まずはローカル環境(自分のPC内)でサイトを作ってみましょう。

進めるコツは以下の通りです。

(1)AIに聞いてみる

(2)ネットで調べる

\おすすめお役立ちサイト/

(3)STEP4:HTML/CSS(+JavaScript)の基礎学習をする。のステップで学んだ教材を見返す/読み返す。

(4)(いれば)知り合いに聞く

💡 最近はFigmaのデザインを自動でHTML/CSSに変換する仕組みもあるそうです。
私は学習を兼ねて使いませんでしたが、今後はそういった情報のキャッチアップも重要になると思います。

②Wordpress(管理画面)と連動するようにする

☑️このSTEPが役にたつ!
STEP5:WordPressの仕組みを学ぶ

ここでのコツは以下の通りです!

(1)AIに聞いてみる。
👇chatGPTに聞いてみた例

(2)STEP5:WordPressの仕組みを学ぶの教材を見返す

ご紹介した講座は本当に良い講座です。各動画も短いので、該当の箇所に何回も戻って理解しながら構築を進めてみてください!

コラム:AIに聞くときのコツ

AIに何かを聞くときにもコツがあります。
といっても、何もAIに聞く時だけではなくて人間に何かお願いするときも同じことなのですが…。笑


1. 具体的に書く
  • 悪い例:「旅行の計画を立てて」
  • 良い例:「3月に東京から京都に2泊3日で行く旅行プランを作って。観光と食事を中心に、予算は5万円でお願いします」

👉 AIは「具体的な条件」が多いほど正確に答えてくれます。

2. 役割を与える
  • 悪い例:「説明して」
  • 良い例:「あなたは旅行ガイドです。初めて京都に行く人に向けて、わかりやすくおすすめスポットを紹介してください」

👉 AIに「あなたは◯◯です」と役割を与えると、答えが一気に専門的で整理されたものになります。

3. 出力の形式を指定する
  • 悪い例:「要点をまとめて」
  • 良い例:「要点を3つの箇条書きでまとめてください」

👉 箇条書き・表形式・ステップごとなど、形式を指定すると見やすくて使いやすい結果になります。

4. ステップごとに指示する
  • 悪い例:「小説の冒頭を書いて」
  • 良い例:「まず小説のあらすじを3行で考えて。その後、冒頭の文章を書いて」

👉 一気に頼むより、段階的に頼むと精度が上がります。

5. 例を見せる
  • 悪い例:「キャッチコピーを作って」
  • 良い例:「『そうだ、京都行こう』のような短くて印象的なキャッチコピーを3案ください」

👉 「こんな感じ」と例を出すと、AIはそれを参考にしてくれます。

6. 制約を入れる
  • 悪い例:「記事を書いて」
  • 良い例:「500文字以内で、初心者向けに、専門用語を避けて書いて」

👉 長さ・対象読者・禁止事項を入れるとブレません。


AIは万能ではない

「AIが全部やってくれるなら、人間は勉強する必要ないのでは?」と思うかもしれません。
しかし、指示を出すには基礎知識が不可欠です。知識があるかどうかで、行き詰まったときの解決スピードは全然違います。

AIは超優秀な部下のような存在。うまく役割分担しながら、二人三脚で制作を進めていきましょう。

③サイトの公開

これまで作ってきたサイトは、ローカル環境――つまり自分のPCの中だけで見られる状態です。
最後に、それをインターネット上に公開して、誰でもブラウザからアクセスできるようにしましょう。

イメージがわきにくいかもしれませんが、難しいことではありません。
例えば、スマホで撮った動画は自分しか見れませんよね。


でも、ひとたびInstagramやYouTubeにアップすれば世界中の人が見られるようになります。
サイト公開も、これと同じことです。

▼サイト公開の流れ
(1)サーバ・ドメインの契約
(2)ローカル側のwordpressデータをエクスポート(出力)
(3)本番環境のwordpressにインポート(取り込み)

(1)サーバ・ドメインの契約

サーバ=サイトのデータを置く場所
ドメイン=URL(例:https://example.com)

この2つを契約することで、はじめてサイトを公開できます。
詳しい手順はここでは割愛しますが、参考記事を見ればスムーズに進められると思います。

💡 サーバやドメインの契約には費用がかかります(目安:月1,000円程度)。方法はさまざまなので、自分に合うサービスを調べてみてください。

上記記事の手順参考に、Wordpressの管理画面に入れたらOKです!

(2)ローカル側のサイトデータをエクスポート
(3)本番側Wordpressにインポート

ここからは「自分のPCの中だけにあるサイト」を「世界に公開する」ステップです。

サイトはHTML、CSS、画像など複数のファイルでできていますが、WordPressにはそれらをひとまとめにしてアップロードできる仕組みがあります。
Instagramに動画をアップするのと同じで、特別むずかしいことはありません。

こちらも参考記事があるので、見ながら進めてみてください。

最後に:ゼロから作ったサイトは、愛着が段違い

これで、オリジナルサイトの完成です!
ここまで読み進めてくださった方、本当にありがとうございます。

サイト制作は、効率だけを考えれば回り道かもしれません。
けれど、自分の手でコツコツ積み上げたものは、完成したときの達成感も、そこに宿る愛着も、比べものにならないほど大きなものになります。

TRAYLは、Trail(小道・痕跡)とRay(筆者の名前)を組み合わせた造語です。

小道に足を踏み入れるように、ときには寄り道をする感覚で、
誰かにとっての逃げ場であり、発見の場でありたい。

そんな思いを込めてサイトを作り、その痕跡としてこのロードマップを残しました。

もしどこかで同じように「自分のサイトをつくってみたい」と思う人がいたなら、その人の背中をほんの少しでも押せたら嬉しいです。

それではまた。

\関連書籍/


キッチンで読むビジネスのはなし 11人の社長に聞いた仕事とお金のこと|一田憲子

コラムで紹介した「北欧、暮らしの道具店」創業者のインタビューなどが掲載されています。

Amazonで見る
Rakutenで見る


融けるデザイン|渡邊恵太

サイト制作には直接関係ないかもしれないですが、デザインについて、大変学びの多い書籍です。

Amazonで見る
Rakutenで見る


コンセプトの教科書 あたらしい価値のつくりかた|細田高広

Version 1.0.0

コンセプトの作り方・考え方が具体例を交えて非常にわかりやすくまとまっている書籍です。サイトだけではなくもっと広く、「何かを作りたい」と思っている方であれば読んで損はないと思います。

Amazonで見る
Rakutenで見る


イメージをパッと形に変えるデザイン大全|尾沢 早飛

Amazonで見る


可愛くしてください!ふわっとしたデザインリクエストに応える本|Power Design Inc.


Amazonで見る


懐かしいけど新しいニュー・ヴィンテージ・グラフィックス|サンドゥー・パブリッシング (著), 石田 亜矢子 (翻訳)


Amazonで見る


[デザイン技法図鑑]ひと目でわかるレイアウトの基本。|MdN編集部 (編集), 大里 浩二 (監修)


Amazonで見る


同じ素材&テキストなのに、こんなに違う! デザインのネタ帳|Power Design inc.


Amazonで見る


サードウェーブ・デザイン


Amazonで見る


ロゴデザインの教科書 良質な見本から学べるすぐに使えるアイデア帳植田 阿希


Amazonで見る


プロのフライヤーレイアウト 映画・アート・音楽・演劇のデザインアイデアフレア (編集), グラフィック社編集部 (編集)


Amazonで見る


見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色ingectar-e


Amazonで見る


伝わるデザインの授業 一生使える8つの力が身につく武田 英志


Amazonで見る