見出し画像

小説投稿サイトユーザーが、今更個人サイトを作ってみたらとても楽しかった話。

私は小説家になろうやカクヨムなどの小説投稿サイトのユーザーで、SNSはTwitterとnoteの二つを使っています。

どのサイトもそれなりに気に入って使っているのですが、自分の所在がばらばらですわりが悪いなと思うことが多々ありました。

「自分の作品は全部ここから読めます!」という場所がないのは、どうにも心もとないというか…。

そんなわけで、今更ですが個人サイトを作ることにしました。
投稿サイトに載せた小説のリンクを格好良くまとめたポートフォリオサイトなら、最近よく見るWixとかいう無料サービスを使えばささっと作れるだろうという算段です。

実際やってみたら、かなり楽しかったです。
あんまりにも楽しかったので、制作過程をまとめてみました。覚え書き半分ですが、何かの参考になれば嬉しいです。

①ざっくりとした形を決める

まずはWixのサイトにログインして、好みのテンプレートを選びます。googleアカウントも使えるのでお手軽です。
私はタイルっぽい配置の画像をスクロールするやつをやってみたかったので、一番それっぽかったテンプレートを選びました。

Screenshot_2020-07-02 クリエイティブな方向けの白紙テンプレート WIX


自分の作りたいサイトのイメージを固まらないときには、こちらのWixの公式ブログの記事を読んでみるのがおすすめです。

中でも個人的に役に立った記事は、この二つ。

私はセルフブランディングという言葉にちょっと胡散臭い印象を持っていたのですが、こうした記事を読んでプロフィールの自己紹介文をアップグレードしたら自分を見つめ直す機会にもなったのでなかなか良かったです。

(Wixのエディタ自体の使い方はやっぱりWix公式のヘルプセンターが一番詳しいです。特に基本的な使い方が載っているのはこちらのページです)


②色選び~ロゴ作成

私はほっこりできない料理小説をよく書くのでサイト名を「夜竈文庫」にし、サイト全体のモチーフもかまどや料理に関係するものを中心に選ぶことにしました。

こうして最初に決めたテーマに合ったかたちで、次はサイトで使う色やフォントを決めます。
私の場合はサイト名に「夜」という漢字が入っているので、配色は黒に近い濃紺+ベージュにしました。決めた色はパレットに追加しておくと便利です。

パレット

フォントはWebフォントも使えるみたいですが、Wixで元々使えるようになっている築地ゴシックにしました。

ヘッダー画像はストックフォトサイトのUnsplashで「cooking stove」と検索して出て来たものに。

ロゴアイコンはInkscapeを使ってベクターデータで竈のシルエットを用意して配置。ロゴメーカーはWixにもあるので、そうしたものを使っても良さそうです。

ヘッダー

また日本語フォントの種類が少なめで難しい漢字は表示されなかったりしたので、最終的にはヘッダーに置くサイト名もベクターデータにしました。
フォント選びには、こちらの「ためしがき」というサイトが便利です。


③サイトの構成を考える

なるべくシンプルな構成にしたかったので、サイトメニューは小説、About、Twitterへのリンク、お問い合わせの四つだけにすることにしました。

構成

Aboutには先ほどセルフブランディング的なノリで考えた自己紹介文をコピペ。

Twitterへのリンクは、生存報告用に作りました。(SEO対策にブログをつける人も多いですが、私は更新できる気がしないので…)

お問い合わせのフォームは、必要ない部分を消したり文字を大きめにしたりして使いやすくしときます。

フッダー・About・Contactの三か所には、ソーシャルバーもつけました。

画像10

余談:WixにはWix ADI(Wix Artificial Design Intelligence)という人工知能を使ったサービスもあり、ここまではAIにお任せでもある程度は形になります。Wix ADIでやってみると、こんな感じの外国風の自信満々な語り口のサイトに。雛形は何種類かはあるみたいです。

adi切抜き


④メインコンテンツを揃える

サイトのメイン要素であるコンテンツの部分を作ります。
私の場合は余所の投稿サイトへのリンクがメインなので、Wixプロギャラリーを使って表紙の画像を並べてリンクを設定しました。
表紙画像そのものは、加藤木麻莉先生の素材集の画像に無料デザインツールのCanvaで文字入れして作っています。

ギャラリー

色やフォントと同じように、素材もある程度テーマを絞って選べばまとまりのあるサイトになるかと思います。
Canvaの使い方については、この方の記事が詳しくてわかりやすいです。


⑤微調整を重ねる

モバイルサイトのレイアウトや文字の大きさ等、いろいろ微調整。ガイド機能を使うと素材の配置が楽でした。

プレゼンテーション1

サクサク動くサイトにしたいなら、アニメーションページトランジションは全部なしにしておいた方が良さそうです。

ただモバイルサイトのメニューは最新版にして、開くときにアニメーションを少しはつけておいた方が絶対に格好良いと思います。ヘッダーを隠れる仕様にしてメニューを置けば、今風の感じに。ただしページが短すぎると、ヘッダーがうまく出し入れできないので、調節は必要です。
ギャラリーも、影や動きを少しはつけといた方が様になる気がします。

モバイル


⑥めでたく完成

最終的には、こんな感じの雰囲気になりました!

画像9


補則:Wix以外の無料HP作成サービスについて

グラフィックソフトやパワポに慣れていれば、Wixの操作もすぐにわかると思います。ただこだわらなければ楽に完成するけれども、こだわろうと思ったらクセが強く時間がかかるツールかもしれません。

またページ数が多くなると重くなるらしいので、ブログなどコンテンツが多くなるサイトには不向きだと言われています。
Wordpressなどにきちんと移行できる仕組みも今のところはないので、サイトのデータを自分の財産としてずっと持っておきたい場合にも不向きです。

自分の場合はコンテンツは外部の小説投稿サイトにあってその案内が目的でしたので、わりとWix向きだったのかもしれません。
他のサービスを使った方が良さそうな場合もあると思うので、簡単にですが補足的に他サービスも紹介します。

・Wix以外の無料のHP作成サービスの有名どころ

Jimdoo Wixよりもシンプルらしくて、グラフィックソフト的な操作が苦手な人にも良さげ。HTMLも使えるので、昔サイトやってた人にもいいかも。ただし無料で使うとなると180日ルールがネック。

Ameba Ownd ブログ中心にやりたいorアメブロユーザーの方に。拡張性は低いけど、その分初心者にはやさしそう。できたサイトはサクサク動く。インスタとかツイッターのタイムラインを楽に表示できるので、更新している風を装いやすいらしい。ただしお洒落なテンプレートを選べば、画像を用意するセンスが問われる。テーマにsugarを選ぶといにしえの個人サイトっぽく仕上がりそう。バックアップのサポートは薄めで、無料プランは固定のページ数に制限有。

Tumblr イラストレーターさんがよく使ってて、お洒落なテンプレートが多いイメージ。

・Twitterの拡張系のサービス

プロフカード テキストベースでざっくりと自分についてまとめたいだけなら選択肢に入れても。

HTML名刺 プロフカードに似たサービスだけど、URLが短めなのが魅力。

ぷらいべったー 記事一覧の機能が便利そう。

min.t プライベートに使えるTogetter的なサービス。ツイートだけではなく文字や画像もまとめられるので、特にTwitterでよく作品を発表する人に便利かも。ほぼモーメントの上位互換なので、普通に気になったツイートをまとめるときにも便利。


おわりに 個人サイトを作ってみて

個人サイトを作るのは、普段とは違う脳を使っている感じがしてすごく楽しかったです。
隅から隅まで全部好きなように素材や文章を並べることができて、自分の城を手に入れたって感じでわくわくしました。

また自分の作品をポートフォリオ的にまとめる過程で、自分の創作活動をいい感じに俯瞰できたような気もします。

この先、更新していくのが楽しみです。

できたサイトはこちらですので、もしよかったら覗いてみてください!


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
名瀬口にぼし

記事を読んでくださり、誠にありがとうございます。 こちらのHPに小説投稿サイトに掲載中の作品をまとめていますので、併せてぜひよろしくお願いいたします。 https://nsgtnbs.wixsite.com/yorukamado

ありがとうございます。お礼に杏仁豆腐をどうぞ。
23
Web小説書きの社会学系大学院生。少女小説風のファンタジーや料理小説を、カクヨムや魔法のiらんどで書いてます。『飯テロ 真夜中に読めない20人の美味しい物語』(富士見L文庫)に短編収録。2020年魔法のiらんど大賞・最終ノミネート作品に長編選出。あとはときどきWixとCanva。