最先端のWebマーケティングを発信するメディア

最先端のWebマーケティングを発信するメディア

フリーライター向けオンラインポートフォリオサイトのデザイン案10選

最終更新日:
SHARE
FacebookTwitterLineHatenaShare

webデザイン
オンラインポートフォリオ(ポートフォリオサイト)とは、自分の写真やイラスト、執筆記事などの作品を公開するwebサイトのことです。ただ素材を並べただけのサイトでは作品をきちんと見てもらえない可能性があるため、デザインに注力する必要があります。

当記事では特にフリーライター向けのデザイン案を紹介していきます。

ライターにおすすめのwebポートフォリオデザイン10選

ライターにおすすめのwebポートフォリオデザイン10選

それでは、ライターがオンライン上にポートフォリオを作る際に参考になりそうなデザイン実例を10種紹介します。

①斜めの線を多用する

ライターにおすすめのwebポートフォリオデザイン10選

webサイトは基本的に縦に区切りを入れるか横に区切りを入れるレイアウトが多く、縦横に展開されたページ構成になりがちです。縦横で構成されたwebページは静的なイメージが強く、躍動感に欠けます。

そこで、三角形や斜線などをあえて利用することでページ内に動きを出すように工夫をするデザインは、アクティブな印象を伝えたいときにおすすめの手法です。個性を出すこともでき、訪問者にインパクトを与えることができるデザインといえるでしょう。

ライターであれば当然ながら文章を読んでもらうことが重要ですが、テキストだけが並んだサイトは見にくいというのが正直なところです。記事のスクリーンショットなどを貼りつけて、視覚的に興味を惹かせることが大事です。

▼参考になるのはwebデザイナーのJoyce Van Herck氏のポートフォリオサイトです。
http://www.joycevherck.com/

②白黒×文字を強調させる

ライターにおすすめのwebポートフォリオデザイン10選

webサイトを格好良く見せようとすると写真を背景に使用したり、カラフルなデザインにしがちですが、あえて白と黒を基調としたモノクロデザインにするのもおすすめです。また、物書きというのがひと目で伝わるよう文字を際立たせたデザインのサイトにするのもユニークでユーザーを引きつけます。色味が少ないと見ていても疲れにくいため滞在時間を自然に長くする効果もあります。

シンプルが故に気をつけなければならないのはプロフィール文章です。白黒の背景に文字だけの紹介文では信頼度こそあるかもしれませんが、流し読みされてしまう可能性があるため、アイコンなどを使用する工夫が必要です。

▼グラフィックデザイナーの西村沙羊子氏のポートフォリオサイトが参考になります。
https://www.oniguili.jp/

③アニメーション・音響効果

ライターにおすすめのwebポートフォリオデザイン10選

音楽が好きな方やビジュアル面に特にこだわりたい方は、BGMやアニメーション効果をwebサイトに取り入れて個性を出すのもユーザーを引きつけるポイントです。作品の見せ方を工夫し、良い意味でユーザーの期待を裏切るような動きを作り出せば、ユーザーを虜にすることができるかもしれません。とはいえ複雑すぎると逆にユーザー離れを起こしてしまうこともあるため、シンプルなデザインにアニメーション効果や音楽効果をのせたデザインがおすすめです。

搭載する手法についてはマウスオーバーなどがありますが、ページによって異なるイベントを盛り込めば、一層興味深いページに仕上がります。webサイトはタブレットやスマートフォンでも閲覧されるため、どのデバイスでも動作不良を起こさないように入念にチェックする必要があります。

▼webデザインやアートディレクションを手がける田淵将吾氏のポートフォリオサイトが参考になります。
https://www.s5-style.com/about

④英語を交える

ライターにおすすめのwebポートフォリオデザイン10選

webの世界に国境はありません。オンライン上にサイトを開設すれば世界中で閲覧することができるため、ターゲットを日本人に絞るだけではもったいないです。翻訳ライティングや海外に進出する計画がなくても今や日本で活躍している外国人もたくさんいるため、どこから仕事につながるかわかりません。日本語だけでなく英語も上手に取り入れたwebサイトは国境の壁を取り払う第一歩です。

英語が不得意という方には、英語のみのサイトを作るだけが手法ではないことをお伝えしておきます。大事な箇所だけマウスオーバーで英語に切り替わったり、日本語と英語を一緒に掲載するなど方法はたくさんあるのです。英語を取り入れることでデザインによってはwebサイトをスタイリッシュに見せることもできるため、対日本人にも効果を出すことが可能でしょう。

▼フロントエンドエンジニアの平尾誠氏のポートフォリオサイトが参考になります。
https://hiraomakoto.jp/

⑤上級者向けインタラクションデザイン

ライターにおすすめのwebポートフォリオデザイン10選

より多くの方に見てもらいたいのであればユーザビリティーを高めるインタラクションデザインというものがあります。インタラクションデザインの定義は難しいのですが、簡単にいってしまうと説明文を読まなくても直感的に操作できるデザインのことです。

ワンランク上のインタラクションデザインは、直感的に次のステップに進ませてしまうほどユーザビリティーが高く、難易度も高いです。難しさはありますが完成度も高いので、気になる方はプロのデザイナーに相談してみるとよいでしょう。操作のしやすさやレスポンスの早さ、そして高いデザイン性、一定の定型性を持たせることを考慮しなければユーザーが使いやすいとは感じてくれません。

ビジュアルやモーショングラフィックス、サウンドなどを重ねれば一層質の高いwebサイトになります。

▼Takumi Hasegawa氏のポートフォリオサイトが参考になります。
https://unshift.jp/

⑥1ページ完結型で見やすさを追求

ライターにおすすめのwebポートフォリオデザイン10選

伝えたい情報が多ければ多いほど複数ページにわたるケースが多くなり、情報量は豊かになりますが、逆に見やすさは失われてしまいます。あくまでも1ページに掲載できる内容にとどめてそこだけで完結させることにこだわりを持ったデザインもおすすめです。

webサイトは書籍と異なり入口と出口が決まっておらず、どこから入ることもできるのが特徴です。そのためどこからアクセスしても途中からではなく完結できる1ページ構成はとても見やすいwebサイトといえます。

1ページ内に記載するのは作品はもちろん、コンセプトや説明文、プロフィールまですべてです。リンクは全く異なるインデックスへ接続させるだけです。

▼デザイナーのフクシマナオキ氏のポートフォリオサイトが参考になります。
https://fukushimanaoki.com/

⑦色づかいにこだわる

ライターにおすすめのwebポートフォリオデザイン10選

webサイトでは色をいかに上手に使うのかがポイントです。何色使うのか、配色はどうするのか、組み合わせは無限大なので、色を上手に使うのは難易度が高いです。色に凝り始めると、多色づかいをしてとにかく目立つようにしたり、グラデーションなどを活用する方法が思い浮かびますが、ページ全体がうるさくなって見にくくしてしまうこともあります。

基本的には色づかいはシンプルなものがよいでしょう。たとえば全ページにおいて2,3色しか使わないと決めたり、上半分をベージュ、下半分を白の背景にしたら、次のページでは上下の色を反転させるなどです。配色が難しい場合には、淡い色の写真などを使うことで同じような効果を導き出すこともできます。

▼先ほどご紹介した田淵将吾氏の別のポートフォリオサイトが参考になります。
https://www.s5-studios.com/

⑧文章力を強調する縦書き

ライターにおすすめのwebポートフォリオデザイン10選

縦書きデザインはなかなかありそうで、ないかもしれません。横書きのwebサイトが多いので、縦書きだと記憶に残りやすく、また、文学的な印象を与えることができます。文字が主役になるためフリーライターには最もおすすめできるデザインかもしれません。

フォントにこだわれば統一感を演出でき、よりスタイリッシュなポートフォリオに仕上がるでしょう。また、縦書きだとスマートフォンやタブレットなど縦長のデバイスとも相性がいいので、初めて会うクライアントにその場で自己プロデュースするときなどにも好印象でしょう。

▼グラフィックデザイナーのカワセタケヒロ氏のポートフォリオサイトが参考になります。
http://www.musubime.jp/

⑨視点をコントロールする

ライターにおすすめのwebポートフォリオデザイン10選

ポートフォリオとは自分の作品を見てもらうためのものなので、いかにその主役となる作品をよりよい状態で見てもらうか工夫することが最重要項目です。コンテンツを見せる方法にこだわりを持ったデザインを紹介します。

ただ作品をサイト内に掲載しただけでは、相手が注目するするものをコントロールできません。そこでスライドショーなどを活用してコンテンツを見せるための工夫を取り入れることがおすすめです。

スマートフォンなどの小型のデバイスでは、複数のコンテンツを1ページに並べるとどうしても小さくなってしまいますが、スライドショーを取り入れることで、ひとつひとつを最適な大きさで見せることもできるようになるでしょう。

▼グラフィック、webデザイナーの北尾知大氏のwebサイトが参考になります。
http://kitao.grub.jp/

⑩ポイントを後から表示させる

ライターにおすすめのwebポートフォリオデザイン10選

前述のスライドショーのアプローチも効果的ですが、ポイントとなる部分を後から表示させるというのもひとつの方法です。動的なページはやはり決まりきった形ではないという印象が強く、閲覧者に楽しんで見てもらえるため、リピート率を高める効果も期待できます。

▼写真家である谷口巧氏のwebサイトが参考になります。東京タワーをテーマにしたコンテンツで、その写真をバックにスクロールしていくと次々にSNSのキャプションが表示されていきます。谷口氏は写真家なのであくまで写真がメインですが、ライターであれば、後から表示される文言をすべて自身で手掛けて、より際立たせるという手法がよいでしょう。
http://www.takumitaniguchi.com/tokyotowers/

オンラインポートフォリオのデザインはさまざま

オンラインポートフォリオのデザインはさまざま

ポートフォリオサイトはコンテンツを主役として作るのが一般的ですが、見せ方次第で印象を変えることができ、デザインの幅も広げることができます。一から作るのは難しいですが、最近では無料のツールなどもあるためデザイナーに依頼する前に一度自分で試してみてもいいかもしれません。今までのライティング実績をより格好良く見せてみませんか?

SHARE
FacebookTwitterLineHatenaShare

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT