SNSのリンク集×ポートフォリオ化。コード・知識不要のPOTOFUでプロフィールサイトを作ってみた

POTOFUで自分のリンク集を作ろう
スポンサーリンク

どうもこんにちは、@Tsut-psです。

リンク・ポートフォリオを作りたかった私に、突如 来たーーっ!

新しくできたサービス、「POTOFU」です。

コードを書いたり構成を考えたり、難しいことは一切なし。

Web上で動き、リアルタイムに反映され、そして何よりシンプル……というもの。広告もなく、完全無料です。

スマホで見たときのものがこんな感じ。

モバイル端末でPOTOFUを見たときのスクリーンショット。PC版と比べて、細めな表示になった。

知識不要で迷うことなく作れる「POTOFU」というサービスを、興奮が冷めないうちに紹介しておこうと思います。

このページの画像内にあるアイコンの一部は、FF14のスクリーンショットです。
権利表示 (C) SQUARE ENIX CO., LTD. All Rights Reserved.
スポンサーリンク

POTOFUで何ができるの?

POTOFUでは、具体的に何が作れるのでしょうか。

公式サイトには、このように書いてあります。

POTOFUとは?
インターネット上にひろがるあなたの活動を
プロフィール&ポートフォリオにしてカンタンにまとめるサービスです。

POTOFU(ポトフ) より

そう、POTOFUとは“まとまった”プロフィールサイトが作れるサービスです。

そして、使える機能は大きく分けて主に3つあります。プロフィール欄・リンク集・アクティビティです。

プロフィール/自分自身を400字で自己紹介

自分自身が何者なのかを400字以内で書くことができます。

上に自身のアイコン、その下に名前、英語名、自己紹介文の潤に表示されている。

また、当然ながら名前とアイコンが一番上に表示でき、英語名(※)も下に載せることが可能です。

※英語名は英語以外でも入力できます。読み仮名として載せるのも可能でした。

リンクリスト/自分だけのリンク集が作れる

アイコン、見出し(名前)、コメント(説明文)の3つで構成された、リンク集を作ることができます。

具体的にはこんな感じ。

自己紹介文の下に、それぞれのリンク集が載っている。

カードっぽく表示されます。

例えば、Twitterの枠内を押すと“Twitterのアカウント”に遷移します。

アクティビティ/SNSに上げた画像が、自動的にポートフォリオ化する

ここからがびっくりするところ。このPOTOFUの一番面白い機能です。

なんと、SNS上での活動をアクティビティとして見やすい形に残してくれます。試しにサブアカウントのツイートを載せてみると……

リンク集の下に、アクティビティ、つまり自身のSNSの投稿を埋め込みのような形で、4列で表示される。

Twitterはログイン不要で瞬時に読み込むことができる。

瞬時に読み込むことができました。もちろん、画像のみや“#potofu”のついた投稿のみに絞って載せることも可能です。

また、Twitterの他にYouTubeやInstagramも連携できます。TwitterとYouTubeは連携不要(ログインが必要ない)で、Instagramは連携必須(ログインが必要)でした。

試しにYouTubeを載せてみると、こんな感じ。

YouTubeにすると、Twitterのときとは違って2列表示になる。その際、サムネイルの幅に合わせた横長表示になった。

現在は活動休止中のYouTubeアカウント。

訪れた方がついでに見ていってくれるかも……!

実際に作ってみた(筆者のPOTOFUを見に行く)

ということで、実際に作ってみると、これがかなり簡単に作れました。

作って公開するまでは数十分で終わりました。

デザインなどの余計なものを考えなくて良いため、負担がそれほどかかりません。

あれこれ調節するのが楽しくなってしまい、背景やらアイコンやらを少しずつ変更して上のような感じに落ち着きました。

良き点(作るメリットとオススメだと思う点)

実際に作ってみて、私が「これとてもいいなぁ……」と感じた部分を紹介していきます。

とはいいつつ、「中身がどんな仕様かを見るよりも まずいじってみたい」という人は、実際に作ってみるのをオススメします。

↑公式サイトのトップページに飛びます。

招待限定の機能開放(後述)で「招待URLを教えて~」という方はこちらから。

コードが一切不要でレイアウトなど一切考えなくて良い

まず、プロフィールの管理画面はこのようになっています。

POTOFUのプロフィール編集。基本プロフィールの下に、ID、アイコン、名前、英語名、自己紹介文を設定できる項目がある。

POTOFUを使う上でのID、アイコン画像、表示する名前……など、いくつかの入力欄を埋めていくと、先程のリンク先のようなページが出来上がります。

リンクリスト編集。たくさんある自分自身のリンク集を、プラットフォーム別、自由記述別に設定可能。アイコンや表示するか否か、URL、補足テキストなどが設定できた。

リンク集への入力も簡単で、例えばTwitterであれば“プラットフォーム”として予め用意されています。

こうしたものは、他にも、YouTube/note/Facebook/Instagram/ニコニコ動画/Pixiv/小説家になろう/エブリスタ/SoundCloud/Tumblr/BOOTH/GitHubがありました。

こうしたSNSのアイコンはもともと2種類用意されていて、面倒な連携は不要です。URLを貼り付けて補足のテキストを入力するだけでおkでした。

個性的にリンク集を作れる(カスタマイズ性が高い)

先ほど、SNSのリンクが載せられると書きました。

が、こうしたブログやTwitterのサブアカウントについても、同様に載せることが可能です。

一番下に行くと、プラスマークの追加ボタンが表示され、ココから自由に追加して、好きなリンクを設定できる。

試しにサブアカウントを登録してみました。

サイト名に「Twitter(映像垢)」、アイコンに自分が用意した画像、表示欄は(表示)するに設定し、URLはTwitterのプロフィールURLを、補足テキストは適当に入力しておきました。

必要なものは、サイト名(=見出し)と画像、URLと補足のテキストだけです。もちろん、サイト先の認証や連携は必要ありません。

“プラットフォーム”として登録されていたものとは違い、見出しと画像の部分が変更できるようになっていました。

つまり、“プラットフォーム”の機能を使わずに、自身の書いた画像やアイコンを乗っけたり、「Twitter(主)」など好きな名前に変更したりできます。

かなり自由度が高いです。

デザインが良き(シンプルisベスト かつ “いま風”のやわらかさ)

一昔前までは、完全な四角形(とがったタイプ)が多かったのですが、最近では少し丸めたデザインが増えてきました。

POTOFUも、そんなデザインになっています。

POTOFUのサイト全体、例えば、アイコン、リンク集、アクティビティのタブなど、ほぼすべてが丸みを帯びたデザインになっています。

全体的に、少し丸みを帯びていますね。

電子マネーのカードのように縁が丸くなっていて、やわらかい印象を受けます。

私はめちゃくちゃ好印象に感じました。

白基調だけでなく、黒基調(ダークモード)にすることもできる

夜中にアクセスしてもまぶしくない、ダークな色味にすることもできます。

レイアウト設定の下に「公開ページカスタマイズ」があり、モードの欄でサクッと変更できました。

「公開ページカスタマイズ/あなたのページの見た目をカスタマイズできます」と表示されていて、その下にモードの設定オプション、横にノーマルかダークかの選択肢がありました。

試しにダークにしてみると……雰囲気がガラッと変わり、かっこいい感じになります。

POTOFUのダークモードを適用した。

目に優しい感じの色味になりました。

なぜだか……白よりも洗練されているように見えますね。

背景色や強調色のカスタマイズもできる

背景は、単色か画像のどちらかを指定することができます。

背景には、単色、グラフィック(=画像)の2種類が選択可能です。

単色の場合は、彩度と明度はそのままに、色相のみを変更する形で色が変更可能でした。

画像の場合、推奨サイズは縦長の1280×1920pxです。

私は、Photoshopにて即席で作成したグラデーションを背景画像に設定してみました。ちょっと控えめですが、星空を見上げているイメージです。

また、小さいながら強調色のカスタマイズもできました。

ノーマル(白基調)とダーク(黒基調)では、設定できるプライマリカラーが少しだけ変わっていました。ダークモードだと、こんな感じ。

ダークモードを選択した際のプライマリカラーの選択肢。黄色、オレンジに近い赤、黄緑、青緑、紫、濃いピンクの6種類から選ぶことが可能です。

強調色とはいっても、文中のURLくらいしか強調されるものがないので、実質プロフィール中のURLの色を決めているようなものでした。

6色の中で設定した色が、自己紹介文のURLの色になった。

真っ黒背景に強調のカラフルは、どれも相性が良かった。

それぞれのイメージカラーや特徴的な画像を載せるだけでも、ちょっとした個性を生むことにつながりそうです。

機能開放で、フォントを最大3種類から選べる

機能開放で使用できるフォントが増えます。機能開放というのは、ともだち招待のことです。

Twitterのプロフィール欄にPOTOFUを載せると足跡機能が開放される。また、友達を招待した際に、後の機能が一つずつ開放される。1人でアクティビティタブが1つ増え、2人でフォントの追加、3人でさらにフォントの追加、4人でさらにアクティビティタブが1つ追加される。

現在のところ、4人の招待で機能がフルに開放される模様。

知り合いにPOTOFUを紹介するか、招待されるかで“1つの機能”が開放される仕組みになっています。

ここでの“フォント”とは、表示する書体の種類のことで、選べるのは「ロダンNTLG」「DNP 秀英明朝 Pr6N」「 丸丸ゴシックA」の3つからでした。

「ロダンNTLG」はもともと開放されていて、2人招待で「DNP 秀英明朝 Pr6N」が、3人招待で「 丸丸ゴシックA」が使えるようになりました。

POTOFUのフォントを変更してみたときのスクリーンショット。「ロダンNTLG」はいつものゴシックっぽい感じ、「DNP 秀英明朝 Pr6N」は明朝体でビジネス風に、「砧 丸丸ゴシックA」は丸っこくてかわいい風になった。

ページごとに、見慣れたタイプやしっかりした感じ、かわいいイメージなど、豊かな表現を書体で実現できますね。

もちろん、丸い形のフォントが一番しっくり来たので、「 丸丸ゴシックA」にしました。

機能開放で、アクティビティ欄を最大3つまで作れる

初期状態は1つだけアクティビティタブが存在している状態です。

先ほどのともだち招待と同じで、1人招待でアクティビティ2枠、4人招待でアクティビティ3枠になりました。

アクティビティの下にコンテンツが表示された。アクティビティを一つのみ設定すると、アクティビティのタブは表示されない。2つ3つでアクティビティのタブが表示され、切り替えることで別のアクティビティを閲覧することが可能だった。

基本設定の中にある「アクティビティ設定」から連携できます。

「アクティビティ設定/あなたのページに表示されるアクティビティを編集できます。一度登録すれば自動的に更新されます」と表示されている。その下に、Twitterのユーザー名を入力する欄、Instagramの連携ボタン、YouTubeのチャンネルIDを入力する欄がそれぞれ表示されている。

Twitterはユーザー名のみ、YouTubeはチャンネルIDを入力するだけで連携完了で、ログインは必要ありません。Instagramのみログインが必要です。

それぞれのアクティビティは、1つのアカウントの投稿のみを表示するか、複数ごちゃまぜにして表示するかも決めることができました。

アクティビティ1の設定。Twitterのみの投稿を表示することも、InstagramやYouTubeと混ぜて表示することもできる。

ココは、アクティビティごとにかなり詳細に決めることが可能です。

ほとんどの人であれば、全ての活動を1つのアクティビティにまとめればよさそうですね。

逆に、映像系や画像系などで訳があって分けたいという人は、(私のように)アクティビティ欄を増やして分けるという使い方ができます。

 

その他にも、メール窓口を設置したり、機能開放で足跡機能を付けたりできました。

 

数十分で整ったPOTOFUがすぐに作れてしまいます。すごく手軽なので、まずは“お試し感覚”で作ってみるのもいいかもしれません。

コメントを残す

応援よろしくです! →

ブログランキング・にほんブログ村へ 人気ブログランキング