SNS向けプロフィールページ作成サービス5種の使用感と個人サイトへの誘い
より快適なTwitterライフを送るため、目についたプロフィール作成サービスをいろいろ触ってみた。その結果テンプレートを使って自サイトにページを設置することで落ち着いたので、そこに至るまでの記録を残しておく。
ちなみに私はかれこれ10年以上趣味で個人サイトを運営しているタイプのオタク。最近は、ずっと雰囲気でサイトをいじってきたせいでできあがってしまった秘伝のソースと戦っています。
ここに至るまでに触ってみたプロフィールページ作成サービス
ツイフィール
Twitterアカウントでプロフィールが作成できるサービス。ずっと「ツイプロ」って呼んでたけどそっちは全く別のサービスだった。
できること・特徴
Twitterのbioが反映される「自己紹介」にプラスして「もっと自己紹介」が10,000文字書ける。
自己紹介に含まれる「＠ユーザー名」「#ハッシュタグ」「https://～」は自動でリンクされるので、細かいことが分からん！って人でも安心。
「パーソナルタグ」「好きなものタグ」「苦手なものタグ」「フリータグ」などのタグが1,000文字まで設定可能。
ツイフィールのサイト内に検索機能があり、タグクラウドやキーワードからユーザーの検索ができる。
足跡機能はなし。
個人的に残念に感じた部分
背景画像やテーマカラーなども含め、デザイン面での自由度が低い。一応6種類の中から選べるが、全体的にちょっともっさりしている。
画像や動画、ツイートなどの埋め込みはできないので、純粋に「自己紹介だけ書ければいいや」という人向け。
必ず広告が表示され、消すオプション（有料版など）が存在しない。
html名刺
「気取らない自己紹介サイト」が作れるサービス。
できること・特徴
ミニマルでわかりやすいプロフィールページが作れる。
余計なものが一切ないので表示が速い。編集も簡単。
ページが検索やランダム表示に引っかからないプライベート設定にできる。
TwitterとInstagramのアカウント名の対応表のサービスも。
足跡機能はないが、ページの作者のみ閲覧数の確認ができる。
個人的に残念に感じた部分
シンプルな分、文章の量が増えたときにちょっと読みづらい。セクション分けもうっすらしていて長文向きではない。
画像やツイートの埋め込みができない。
文字リンクなどの設定はできず、リンクは全て別窓アイコンに置き換わる。たくさん並べるとちょっとわかりづらいかも。
potofu
手軽にポートフォリオを兼ねたプロフページを作ることができるサービス。
できること・特徴
「#potofu」のタグをつけて投稿した画像のみ自分のページに表示されるので、自動的にギャラリーページの作成ができる。Twitterのメディア欄のスクショと飯の画像をかきわけて作品を探す必要がなくなり便利。イラストを展示したい人や、SS名刺メーカーを使って小説を出力している人にはかなり使いやすいと思う。
リンクリストはアイコン＋説明文を設定でき、視覚的に分かりやすい。
作品を表示するアクティビティタブは、Twitter、Instagram、YouTube、OFUSEの4種類のプラットフォームから2種類表示ができる。例えばTwitterのタブでは絵を、Instagramのタブでは写真を表示するみたいな感じ。
potofuのアクティビティ二つあるのどんなんかな～ってインスタ作ってみたらこういう感じか……これTwitterをタグで別に分けられるようになれば使い道広がるんだけどな pic.twitter.com/BmNeUaMNNm
— 𝚅𝚒𝚛𝚝𝚞𝚊𝚕 𝙷𝚒𝚝𝚜𝚞𝚓𝚒 (@7mi___n) June 9, 2021
足跡機能あり。ページを訪れた最新20名のログインユーザーの一覧と、未ログインゲストのアクセス数の確認が可能。
個人的に残念に感じた部分
ひとつのツイートに載せた複数枚の画像も関連性なく1枚ずつ表示されてしまうのがちょっと不便だった。
また、アクティビティでは画像のみが表示されるので、一緒に投稿したリンクや説明文は毎回画像から投稿に飛んで確認するしかない。
（ベータ版の頃の話だけど）potofuのリンクをTwitterのbioに貼ると表示がバグってしまい使えなかった。
SNSのアカウントだけでは使用できず、Sozi IDの取得が必要。OFUSEとか使ったことがある人はすでに持ってるやつ。
そもそもアカウントに鍵をかけると画像が取得できなくなってしまう。
lit.link
「プロフィールページ」より「リンクをまとめる場所」というイメージが強いサービス。
できること・特徴
リンクをまとめてシェアすることが目的のサービスなので、テキストリンク、ボタンリンク、ピクチャリンクなどリンクの表示方法が豊富。
YouTubeの動画を埋め込んだりもできるので、推しの布教や制作物の紹介も可能。
ベースとなるテンプレートが16種類あり、どれもわりとお洒落。
（使ったことないけど）LINEを使っての編集が可能。
ユーザーが交流するための独自のコミュニティが存在する。
個人的に残念に感じた部分
文字が読みづらい。おそらくスマホユーザーがメインなので、PCから見たときめちゃくちゃ文字が小さい。
なんとなく自分はメインのユーザー層から外れている感がある。
プロフカード
シンプルで見やすいプロフィールページを作ることができるサービス。
ツイートの埋め込みや見出しの設定、セクション分けなども簡単で使いやすかったけど、マシュマロちゃんの夢小説雑語りを機に全サービスから足を洗った。
Carrd
テンプレートを使ったシンプルなウェブサイトの作成ができるサービス。なんかインスタの海外オタクがよく使ってるイメージがある。
これに関してはちゃんと使ったことがないのでコメントは割愛。
基本無料。サイトを保存しなければ会員登録なしでテンプレートを触ってみることもできるので、まずお試ししてみるといいかも。
手軽さは魅力的だけどやっぱりもうちょっと自由度がほしい
そんな感じで、結局ここにたどり着いてしまった。しっくりくるものがないなら作るしかない。このとき私がイメージしていたのはこの3点。
ミニマルなデザインの1カラム。
名刺のように、トップにざっと情報をまとめたい。そこから下にいろいろ書けるような感じ。ツイート埋め込みができると楽そう。
できれば簡易ギャラリーを作ったり、画像リンクを使って作品への動線を作れると便利だろうな～。
少し前にTwitterでよさそうなテンプレートを見かけたことを思い出し、使ってみることに。
新作のテンプレートを公開しました！
007：matome https://t.co/63xg5eXDBn
プロフィール、キャラシまとめを意識した、1枚だけのテンプレートです。サイトまで作るつもりはないけど、SNSアカウントやキャラシをまとめた自己紹介ページが欲しい……という方向け。
そもそもdoさんって？
ガタガタさんが運営されている創作・同人サイト制作支援サイトです。
無料htmlテンプレート配布
無料PHP/Javascriptプログラム配布
サイト制作ノウハウの発信
WordPressの使い方解説
などの情報が無償で公開されている。こことサルワカさんにはよくお世話になっています。
実際にテンプレートを使ってみる
テンプレートを使ったプロフィールページの実装は、
サーバーを借りる
テンプレートをDLし、カスタムする
ファイルをサーバーにアップロードする
の3ステップで可能になる。既存のサービスを使うよりかは手間がかかるけど、好き勝手できて楽しい！
1. サーバーを借りる
私はすでにレンタルサーバーの契約していたので、それを活用する。昔はFC2を使っていたが、名前変換をphpに変えたりWordpressを導入したりの都合で今はロリポップを使っている。
オススメなのは：
〈有料〉
ロリポップレンタルサーバー / GMOペパボ株式会社
XRIA / GMOぺパボ株式会社
スターサーバー / ネットオウル株式会社
さくらのレンタルサーバ / さくらインターネット株式会社
〈無料〉
あたりかな。スターサーバーとXRIAにはフリーのプランもあるので、まずは無料のサービスでお試ししてみてもいいかも。
エックスサーバーとかConoHa WINGなんかもよく聞くけど、他と比べて最低月額料金が高め。
無料と有料では、
広告の有無
容量・データ転送量
サポート体制
独自ドメインの有無
サイト表示速度
サーバーの安定感
PHP・MySQLなどへの対応
といった部分に違いが出てくる。プロフィールページの場合そこまで容量が重くなることはないと思うので、一番影響があるのは広告の有無になりそう。あとはやっぱり無料サービスのほうが「ある日突然サービス終了」のリスクは高い。
2. テンプレートをDLし、カスタムする
今回私はdoさんが配布しているmatomeというテンプレートを使用した。説明に書かれているようにキャラシなどにもぴったりの、シンプルだけどたっぷり書けるテンプレート。オタクが使う前提で構築されているので、痒い所に手が届くつくりになっている。
DLしたファイルの中身はこんな感じ。
DLしたファイルの編集は備え付けのメモ帳でもできるけど、専用のテキストエディタを使ったほうが文字化けのリスクが減る。テンプレートの使い方はdoさんのサイトでも説明されているし、調べればいっぱい出てくるので割愛。
〈使い方〉
〈デザインのアレンジ方法〉
基本的に同人サイト向けに配布されているテンプレートには、「ここを変えると○○が変わるよ」や「ここは触らないでね」といった情報が丁寧に書かれていることが多い。matomeのようにシンプルなテンプレートなら「どの部分がどう作用し、どう反映されるのか」もわかりやすい。つまり編集中に迷子になりにくいので、今回初めてサイトを作る人や以前挫折してしまった人でも挑戦しやすいと思う。
完成したらこんな感じになった。
ちなみに私はよく分からないままやっているので、思った通りの表示方法にたどり着くまで約一ヶ月の時間を要した。
ローカルでいじってたときは2*2で表示できてたのに4枚横並びになっちゃうよ～～～なんでだ pic.twitter.com/45VkKha55V
PCとタブレットは大丈夫だけどスマホからの閲覧が崩れてんな〜 画像リンク入れるのにいじった部分が作用してるんだろうけど、直し方がわからん bootstrapはいじってない pic.twitter.com/A5fD7NihA4
勝ち申した(まだやってたんですか？) pic.twitter.com/847WDO6jbn
小説の内容紹介の画像をPixivへのリンクとして設置した際、画像をしっかり見せたかったので
画像の展示方法を4列→2列に変更
画像の表示サイズを指定
した。それがレスポンシブ設定に影響して（私が加えた変更がスマホ閲覧時に表示されるデザインより優先されてしまって）大惨事を引き起こしたっぽい。ちゃんと勉強しようね。はい。
それと、今回はmatomeのテンプレートと一緒にfuwaimgというプログラムも使用した。
サムネをクリックすると画像がふわっと表示されるモーダルウィンドウ。この間のアプデで画像の拡大も可能になったらしいので、イラストを展示したいな～という人は是非使ってみてほしい。私はこれを使って人様に描いてもらった作品を見せびらかす場所を作った。
それはそうとfuwaimg使って展示場所つくった pic.twitter.com/0ybUqhYkNg
数年前にjQueryに泣かされて以来こういう展示方法を諦めていたのでめっちゃ嬉しい。
ちなみに編集したテンプレートの動作は、htmlファイルを右クリック＞開く＞任意のブラウザを選択で確認が可能。私のようにアップロード後に大変なことになっていることに気づいた場合は、Chromeのデベロッパーツール（WindowsならCTRL+SHIFT+iで出てくるやつ）が原因探しに役立ちます。
3. ファイルをサーバーにアップロードする
テンプレートの編集が終わったら、あとはサーバーにアップロードして公開するだけ。私はサーバーの管理画面からちまちま手作業でやっちゃうけど、（ファイルの量が多い人ほど）専用のファイル転送ツールを使ったほうが楽だと思う。
現役個人サイトユーザーの多いうちのTLでは、このへんのソフトを使っているのを見かけた。
個人サイト楽しい！
2018年のこのツイート
Pixivの代わりに使えそうなやつ https://t.co/e8q5jvGRgs 昔のhtmlは死んだから怖いぞ！とか個人サイトとサーチが絶滅した前提のツイートばかり見て悲しくなったので、私の観測範囲だけどSNSとか個人サイトのテンプレとか。
がいまだにRTされている気配を感じて「さすがに書き直さんとな～」と思っていた。そんなときに丁度よさげなテンプレートを見つけたので、改めて書いておこうと思った次第です。
編集のしやすさ＆管理の手間を考えると、最初はシンプルなテンプレートからスタートするのがオススメ。同じdoさんのテンプレートだと
このあたりも「プロフィール兼作品置き場」にちょうどいい気がする。
確かに「投稿サイト」や「プロフィール作成サービス」と比べてちょっと手間はかかるけど、やり始めると楽しいのがサイトづくり。サーバー借りてまでは面倒かな～って人は、ホームページ作成ツールを使ってみてもいいかも。
まあこのへんは好き好き。
みなさんよい個人サイトライフを！
オマケ：その他個人的にお世話になっているテンプレート配布サイト
追記のNotion
これをまとめ終わったあとに、Notionをウェブサイトとして運用するアイデアと出会った。確かにシンプルに「まとめる」場所を作りたい場合、Notionはうってつけのツールだ。
私は情報をまとめたり進捗管理したりに使っているんだけど、ブログよりクローズドな自分だけのページを作って公開できる便利なツールという感じ。公式でもブログやポートフォリオ的な使い方を想定しているっぽいから、プロフィールサイト作りにも役立ちそう。
Notionでテンプレートを作ってみた記事はこちら。