fbpx

As Best Creative, Do Everything For a Goal…

Blog 社員ブログ

BLOG

社員ブログ

Web制作
フリーライター向けオンラインポートフォリオのデザイン10選
2020/03/05

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

目次

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

それでは、ポートフォリオを作る際に役立つサンプルデザインを10種紹介します。

①アクティブなデザイン

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

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

ポイントは、空いたスペースを活用することです。文章は縦か横に進ませないと読みにくいため、そこに斜めの線が入るとどうしても空白が多くなりますが、全面にやや透過させた写真を背景に使用するなど工夫をすることで寂しさを防止することができます。

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

②白×黒が基調のシンプルなデザイン

webサイトを格好良く見せようとすると写真を背景に使用したり、カラフルなデザインにしがちですが、あえて白と黒を基調としたモノクロデザインにするのもおすすめです。背景をモノクロで構成し、執筆記事などをカラーで枠取りすると主役が一層目立つようになり、ユーザーを引きつけます。見ていても疲れにくいため滞在時間を自然に長くする効果もあります。

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

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

③アニメーション効果や音楽効果を使ったデザイン

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

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

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

④英語を上手に交えたデザイン

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

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

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

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

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

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

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

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

⑥1ページ完結型で見やすさを追求したデザイン

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

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

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

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

⑦色づかいにこだわったオシャレなデザイン

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

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

▼グラフィックデザイナーのMIKE INGHAM氏のポートフォリオサイトが参考になります。
https://www.mikeinghamdesign.com/

⑧個性を表現する縦書きのデザイン

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

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

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

⑨作品コンテンツを魅せるデザイン

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

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

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

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

⑩コンテンツをランダム表示させたデザイン

前述のスライドショーのアプローチも効果的ですが、表示をランダムで行うのもひとつの方法です。ランダム表示にすることで決まりきった形ではなくなるため、ユーザーのリピート率を高める効果もあります。写真撮影を業としている方がよく利用している手法なのでライターには難しいですが、掲載メディアのサムネイルを掲載したら見ごたえがあるので、真似してもよさそうです。

▼写真家である谷口巧氏のwebサイトが参考になります。
http://www.takumitaniguchi.com/

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

レスポンシブ

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

SHARE

PLEASE CONTACT US

Web制作、SEO、各種デザイン制作など、集客についてお困りのことがあれば、
いつでも下記のボタンからお問い合わせください。

Go to TOP
Go to TOP