見出し画像

【4】仕事の取れるイラストサイト、レイアウトの正解例

【いしつく!の教科書 4章】
イラストレーターさんのための仕事の問い合わせの来るウェブサイトの作り方をお伝えしています。

4章では、いしつく!の作戦に沿って作られ、実際に運営しているウェブサイトをネタに、どんなレイアウトにすればよいのかをスクリーンショットを交えて解説します。

見た目がオシャレなデザインを作っているのではなく、作戦に基づいて要素や配置を決めていることを理解していただければ幸いです。

作戦、というのはウェブサイトを仕事に役立てるための作戦です。いしつく!マガジンではここまでに、その作戦や道具立てについてお伝えしてきました。この章だけ読んでも理解が難しい点もあるかと思いますので、できれば1〜3章も読んでください。

■この記事は主に、レイアウトの詳細(なぜそうなっているのか)を解説する記事です。「これと同じサイトをWordPressで作るには?」という具体的な手順を知りたい方はnoteマガジン「WordPressでポートフォリオサイトを作る全手順」を読んでみてください。


はじめに - これはどういうウェブサイトなのか

この章で紹介するのは、私がイラストレーターとして実際に運用しているウェブサイトです。このウェブサイトは、私のイラストの仕事においては最も重要な窓口です。また、実際に会って知り合った方へ、私の仕事を紹介するためにも使います。

このウェブサイトの問い合わせフォームからは、有名大手出版社からのご依頼をいくつも頂いています。一方で「残念な問い合わせ」……一般の人からの個人的なメッセージとか、半分冷やかしのような格安依頼などが来たことはありません(このレイアウトにする前はありました)。

この記事をお読みのイラストレーターさんの中には、「お前なんかのような無名イラストレーターがどれほどのものか」と思っている方もいるでしょう。ただ、私が有名・無名にかかわらず、このウェブサイトを大手企業に勤務する方が見て、このイラストレーターを信頼して大丈夫、依頼をしよう、と思ってくれたことが幾度もあることは、事実です。


それではここから、まずは技術と構成の解説、そのあとにレイアウトの解説がつづきます。

どのように作られているか(技術)

スクリーンショットは購入すると見られます。

このウェブサイトはレンタルサーバーに設置されていて、独自ドメインを取得して割り当ててあります。

ウェブサイトの全体はWordPressでできています。見た目やレイアウトを整えるためには、独自のテーマを作っています。テーマを編集するには、PHP、HTML、CSSの知識が必要です。

利用しているプラグインには次のようなものがあります。

◇ Advanced Custom Fields……記事編集画面で入力欄を増やす
◇ Contact Form 7……問い合わせフォーム機能
◇ Custom Post Type UI……カスタム投稿タイプを管理する。イラスト制作例ページを設けるために使う
◇ Custom Post Type Permalinks……サイト内のURLを構造を管理する

■ 注意点
このサイトと同じレイアウトを再現したいという人のために、WordPressテーマを新しく開発しました。詳しくはnoteマガジン「WordPressでポートフォリオサイトを作る全手順」をチェックしてみてください。

スマートフォン対応は全てのページで対応しています。スマートフォン対応は、どのようなウェブサイトでも必須です。

続きをみるには

残り 11,578字 / 26画像

¥ 800

期間限定 PayPay支払いすると抽選でお得に!

イラストレーターさんはじめクリエイターさんがより良い仕事に出会える世の中を目指してます。応援よろしくお願いいたします!