プログラミングとか何も分からないけどHPを作って頑張って更新できているよって話！

2022年9月6日 2022年9月1日

甘抹らあ

みなさんこんにちは。

今日は、このホームページを作った時のことについてお話ししようと思います。

始めに言っておきますが、私はかなりの機械音痴です。

PCやスマホは触ったそばから壊すし、プログラミングなんて1ミリも知らないし、それどころか、数か月前までは“ASP”の意味すら分かりませんでした。

そんな私ですが、とりあえずこのホームページを作り、更新することができています。

そこで、私と同じように「デジタルには疎いんだよ～～！」という方向けに、自分がどうやってこのホームページを作ったのか、記録しておきます。

将来の自分のための備忘録も兼ねているので、記憶が新しいうちに。

勘違いした内容も書いてしまうかもしれませんが、そういった場合にはマシュマロなりなんなりでご指摘いただけるとありがたいです……。

では、さっそく見ていきましょう。

1．ホームページを作ろうと思った理由

まず、なぜホームページを作ろうと思ったのか？

理由は、大きく分けて３つあります。

1‐1．信用の獲得

1つ目が、イラストレーターとしてお仕事をするにあたって、クライアントさんから信頼してもらうこと。

ホームページがあるからといって即信用してもらえるわけではありませんが、ある程度体裁の整ったホームページを用意しておけば、「この人はちゃんと仕事を引き受けているイラストレーターさんなんだな」と思ってもらえます。

少なくとも、そのように思ってもらえる可能性が上がります。

特にこだわったのは、独自ドメインを取得することです。

独自ドメインを取得すると、それなりにお金がかかります。

でも、そうすることによって、さらに、信用が上がると思うのです。

もちろん、活躍しているイラストレーター様の中にはホームページを持っていない方も大勢いらっしゃいます。

また、持っていても独自ドメインでは無かったり、別のプラットフォームをホームページ代わりにされていたりする方を大勢見かけます。

そのため、ホームページを持つことは必須ではありません。

しかし、ホームページを持たずに成功していらっしゃる方は、SNS等で人気を博している方々――つまり、人気が実績に繋がり、実績が信用に繋がっているような方々です。

私のように、SNSでバズっていない絵描きの場合、ただ待っているだけだと、人気も実績も生まれません。当然、信用してもらうこともできません。

そのため、自ら信用性をアピールし、仕事を取りに行く必要があります。

そこで、ホームページの必要性を感じたのです。

1‐2．ポートフォリオの制作

2つ目の理由は、自分のポートフォリオを見やすく整理したかったことです。

今は、インスタやpixiv、さらにはTwitterまでもがポートフォリオ代わりになる時代なので、自前のポートフォリオなんて必要ないのかもしれません。

仲介会社等にイラストレーター登録をする際も、「ポートフォリオを送ってください」ではなく「作品が見られる場所のURLを貼ってください」と言われることが多いです。

しかし私は、既存のサイトのUIに不便を感じていました。

「見てほしいイラストを」「ジャンル別に」「見やすく」「制作時間なども記載した形で」まとめたかったのですが、このすべての条件を満たすサイトが存在しなかったのです。

そこで、自分のホームページにまとめてしまえばいいじゃないか！　という結論に至りました。

……もっとも、このジャンル分けが功を奏しているかは微妙なところですが。

1‐3．ブログが書きたい！

3つ目の理由は、ブログを書きたかったことです。

私は、常にたくさんの「言いたいこと」を抱えている人間です。

自分が考えたことや感じたこと、新しく知ったこと、果ては誰が興味あるのか分からないようなマイブームまで、語りたいことが頭の中に溢れています。

しかしTwitterでそれを垂れ流してしまうと、見てくれている人にとってはノイズとなりかねません。

特に、イラストレーターとしてアカウントを運用しているつもりなので、絵と関係のない話題を長々と呟きたくはないのです。

また、140字という制約や、Twitter独特のスピード感の影響で、言いたいことが上手くまとまらない可能性もあります。

そこで、

Twitterは基本的にイラストを載せるだけ
言いたいことはブログで言う

という使い分けをすることにしました。

そうすれば、一旦冷静になって考えをまとめる時間もできますし、興味が無い人には読まないという選択肢を取ってもらえます。

そして、ブログを書くことのメリットはもう1つあります。

このホームページを訪れる人の数を増やせるかもしれないというものです。

ポートフォリオを載せているだけだと、ホームページの存在を知ってもらう機会が、とても少なくなってしまいます。Twitterで私を見つけてくれた人と、営業先の担当者さんくらいなものです。

しかしブログも掲載するようにすれば、そしてそのブログの更新通知をSNSで流すようにすれば、なにがしかのキーワードに引っかかって、ブログを見てくれる人が現れるかもしれません。

世の中には、自分が好きなものや知りたいことについて検索して情報を集めている人が多いと思います。そこで、私のブログ記事のタイトルだけでも見て、興味を持って、記事に飛んでくれる人がいれば万々歳です。

少なくともその人には、私のホームページの存在を知ってもらえるのですから。

また、アフィリエイトを行うことで少しでも収益が生まれれば、それがストック収入につながるわけです。

収入が不安定なイラストレーターにとっては、そうした収入源の確保は大切だと思っています。

2．ホームページの大まかな仕組み

次に、ホームページの大まかな仕組みを見ていきます。

とはいえ最初に言った通り私はド素人なので、とにかく雑な説明です。

図解すると、こんな感じ。

サーバーにデータをアップロードして、URLを通じてそこにアクセスした人が、それを見るといった仕組みらしいです。らしい。

3．事前準備

3‐1．他のイラストレーターさんがどんな感じのホームページをもっているのか調べる

憧れている第一線のイラストレーターさんから、駆け出しのアマチュアイラストレーターさんまで、自分が見つけられる範囲のイラストレーターさんのホームページを、片っ端からブクマしていきました。

注目していたのは、次の3点。

コンテンツが何か
UIがどうなっているか
ご依頼窓口がどのようになっているか

これを調べたのは、自分のホームページ作りの参考にするためです。

3‐2．自分がホームページで何をしたいのか決める

最初に述べた「ホームページを作る理由」を改めて確認するということです。

他のイラストレーターさんのサイトを参考に、自分がやりたいことをやるためには、どんな感じのホームページにすれば良いのかを考えます。

私の場合は、ざっくり分けて、以下の点が達成できれば良いと考えました。

独自ドメインの取得
独自ドメインでのメールアドレスの取得
作品一覧の制作
制作時間などの情報の記載
お問い合わせ窓口を作る
ブログを通じて自分に興味を持ってもらう
ブログを通じて、イラスト以外の経路からもホームページに辿り着く人ができるようにする
ある程度記事が増えてきたら、アフィリエイトを始めて、ストック型収入の１つにする。
甘抹らあに関する基本的な情報を、一箇所に集約する
上記の内容を自力で更新できるようにする

3‐3．サーバーを決めよう

私は本当に知識が無いので、様々な方のブログ記事を参考にして決めました。

重視したのは以下の点です。

使いやすさ、分かりやすさ（とにかく簡単なものが良かった）
安定性
費用（お金がないので、高すぎるところは無理だった……）

有名な会社は、

Conoha wings、エックスサーバー、ロリポップあたりのようです。

3‐4．ホームページを作ろう

私は、Wordpressのインストールも独自ドメインの取得もSSL設定もまとめてやってくれるプランを選んだので、そこには時間がかかりませんでした。

こういうまとめてやってくれるプランは、ググればすぐに見つかると思います。

そちらを参考に、やってみてください。

例えばconoha wingsだと、こちらのページに説明があります↓

https://www.conoha.jp/lets-wp/how-to-make-hp/#section03

3‐5．テーマを決めよう（無料or有料）

テーマというのは、ホームページの大まかな体裁を整えてくれるものです。
テーマを活用すれば、ちょっと編集するだけでそれっぽいホームページが作れちゃいます。すごい！

自分のやりたいことがやれそうなテーマを選びましょう。

テーマには無料のものと有料のものがあり、もちろん有料の方ができることが多いです。

ですが、無料のものでも基本的なことはできます。

4．実際にHPを作っていく

4‐1．最初にやること

4‐1‐1．検索流入できないようにする

構築中のホームページに入られるとまずいので、「検索結果に表示させない」状態にしておきます。もっとも、ホームページを作ってからしばらくは、何も対策しなくても検索結果には出てこないみたいですが。

4‐1‐2．プラグインを入れて、セキュリティ対策を取る

何よりも大事なのは、セキュリティ対策です。ユーザー名がバレないようにしたり、お問い合わせページにスパムが来ないようにしたり、その他いろいろとセキュリティ対策を取ります。

人様のブログですが、こちらの記事を大変参考にさせていただきました。↓

https://azuki-rinrin.com/wp-plugin-recommend-list/

4‐1‐2．固定ページを作る

このサイトで言うところの、「ホーム」「作品一覧」「作品詳細」「ブログ」「お問い合わせ」みたいな、固定されているページです。

とりあえず体裁を整えようということで、これらの基本的なページを作ってしまいます。

ここで、記事を制作する作業にも慣れておきます。

4‐1‐3．外観を色々と調整する

その他、スマホとPCで見え方を確認しながら、訪問してくれた方が見やすいように概観を調整します。

4‐2．やりたいことリストを消化していく

4‐2‐1．作品一覧の制作

ジャンル別に作品をばーっと載せていきました。

「ギャラリー」機能を使うと、簡単に一覧にできます。

※ただし、トリミングされてしまうことと画像リンクを設定できないことに注意。

4‐2‐2．作品・実績ページの整備

こちらには制作時間とかもゴチャゴチャ書いています。

デフォルトの投稿は「ブログ」の方に表示されてしまうので、それとは別で「カスタム投稿」という機能を使って、記事を作成しました。

こっちだけ、なぜかエディターが違います。

普段のエディターはこれ（画像1）で、

作品・実績ページのエディターはこれ（画像2）

普段の方はグーテンベルグエディター（？）といって、比較的最近になって登場した編集形式らしいです。元々は作品・実績ページの方のエディター（クラシックエディター）が使われていたそう。

クラシックエディターだと直感的な操作ができないので、個人的にはグーテンベルグの方が好きです。

カスタム投稿のエディターをグーテンベルグに変えるやり方もあるみたいですが、コードの書き換えが必要らしいので、裸足で逃げ帰ってきました。素人には無理じゃ。

4‐2‐3．ブログ投稿

これはデフォルトの「投稿」機能を使って書いています。エディターは、グーテンベルグです。直感的に操作できるので、こういうのに詳しくない方でも、すぐに慣れると思います。多分。

でも、玄人さんほどクラシックエディターの方が使いやすいって言ってるので、人によるのかもしれません。

4‐2‐4．アフィリエイトの開始

ブログ記事が10本を超えた頃、Googleアドセンス・Amazonアソシエイト・楽天アフィリエイトに登録（or登録申請を出）し、アフィリエイトを始めました。

すぐに利益を出すのは難しいので、のんびりやっていきます。

アフィリエイトについて詳しくは、こちらの記事をご参照ください↓

5．トラブったこと

5‐1．システムエラーで作業できない時がある

たまに、なにがしかのエラーが出て作業できなくなってしまうことがあります。

そんな時は、警告の文章をそのままコピペしてググってみます。

運が良ければ、解決策が見つかります。

解決しなかったら、とりあえず再起動してみます。

それでもダメだったら、とりあえず時間を置いてみます。

あとは、公式サイトやTwitterを確認して、その不具合が自分だけの問題なのか、同時多発的な問題（公式側の問題）なのかもチェックしておきます。

同時多発的な問題の場合は、公式が何某かの対処をしてくれる可能性が高いです。

そして時間を置いてもやっぱりダメだったら……（今のところ、それは無いですが）、お問い合わせ窓口に相談ですかね。

この辺りの流れは、ホームページ運営に限らず、何をやるにしても同じだとは思います。

6．大事だなと思ったこと

6‐1．あらゆるボタンを押すのを恐れすぎないこと

私はとにかく機械音痴なので、色んなボタンを押すのが、怖くて堪りません。

これを押したら、なんかやばい奴にハッキングされるんじゃないかとか

知らないところでお金が請求されちゃうんじゃないかとか

パソコンが壊れるんじゃないかとか

とにかくなにやら訳の分からないことになってしまうんじゃないかとか

色々考えてしまい、二の足を踏むことが多いです。

しかし、そうやって怖がっていると何もできずに終わってしまいます。

無警戒なのもマズいですが、よっぽどやばい会社と契約していない限り、そうそう変なことは起こらないはずです。なので、ある程度は思い切って「えいやっ」と行動することも大事だと思います。

大抵のミスは誰かが既に経験済みなので、何とかなります。多分。多分ね。

金銭に関しては、クレジットカードの情報や銀行口座の情報をみだりに入力しない限りは、勝手に取られようがないはずです。

6‐2．でも、自分が何をしているのかは理解するようにすること。

ここでもう１個大事だと思っているのが、自分の行動の意味を理解しておくことです。

完璧に理解する必要はないので（私もサッパリ分からないことばかりです）、「○○を××すると△△になるのかな？」と、とりあえず表面的なことだけでも理解することが大事だと思います。

つまり、とりあえずいじってみようで進むのではなく、ある程度自分の行動とその意図を言語化しながら作業していくということですね。

仮説を立てる：「○○を××すると△△になるのかな？」
↓
それを検証する：「やっぱり△△になった！」or「なぜか◆◆になってしまった……」
↓
理由を考える：「ということは、○○は□□という意味なのか！」
↓
さらに仮説を立てて検証する

のくり返しみたいな感じです。

6‐3．先人の言うことに従うこと

ブログの作り方については、分かりやすくまとめてくださっている方が大勢いるので、それらを参考にして作るのが確実です。

俺には俺のやり方があるんだ！　と言えるのは慣れている人だけなので、大人しく先人の言うことを聞きましょう。

7．おまけ

最後に、参考にしたブログ記事などを紹介させていただきます。

※いずれも、最終閲覧日は2022年8月末です。最新の情報は各自でご確認をお願いします。

皆さんも、もしよかったら参考にしてください。

書籍の方が分かりやすいという方は、こちらから探してみてください。
→Amazon（本）で「ホームページ制作」を検索

8．まとめ

以上、自分のホームページ制作の流れをまとめてみました。

いかがだったでしょうか？

それでは、また別の記事などでお会いしましょう！

甘抹らあでした！

※お仕事のご依頼はお問い合わせページまでお願いします！

Twitter→@amamatsu_lar

カテゴリー: デジタル関連、活動記録