Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでオンラインポートフォリオサイトを作成する方法

履歴書やLinkedInのプロフィールは素晴らしいが、潜在的な顧客や雇用者の目を引くには十分でないことが多い。

私たちの経験によると、インパクトを与えるには、プロフェッショナルで魅力的な最高の作品を紹介するオンライン・ポートフォリオが必要です。

技術に詳しくない方もご安心ください。

この投稿では、WordPressでオンラインポートフォリオサイトを作成する方法をステップバイステップで紹介します。

How to create an online portfolio website in WordPress

なぜオンライン・ポートフォリオサイトが必要なのか?

ポートフォリオは、フリーランサー、求職者、中小企業を含むすべての人のための資産です。

オンライン・ポートフォリオは、あなたのデジタル名刺と考えることができる。

例えば、どこで見込み客と会っても、あなたのポートフォリオサイトに簡単に誘導することができます。過去の作品サンプルを探し回る代わりに、見込み客や将来の雇用主に自信を持って、あなたの素晴らしいオンライン・ポートフォリオを送ることができるのです。

Example of portfolio website

ポートフォリオはアーティストやクリエイターだけのものだと思うかもしれないが、それは間違いだ。

グラフィックデザイナー、ライター、開発者など、どのような職業にも有効であり、その業界で最高の足跡を残すチャンスを提供する。

一言で言えば、ポートフォリオサイトは、あなたが群衆から際立ち、信頼を築くのに役立ちます。プロフェッショナルなポートフォリオサイトをデザインすれば、即座に信頼を得て、あなたの経験をアピールすることができます。

また、特定のキーワードに基づいて検索エンジン向けにサイトを最適化することで、より多くの人に見つけてもらうこともできる。

💡時間がないけれど、あなたのビジネスに魅力的なオンラインポートフォリオサイトが必要ですか?WPBeginnerプロサービスがお手伝いします!デザインからSEO対策まで、お客様のニーズに合わせたカスタムポートフォリオサイトをお届けします。WordPressウェブサイトデザインサービスを今すぐご利用ください

そのことを念頭に置いて、WordPressでオンライン・ポートフォリオサイトを作成する方法をご紹介します。

準備はいいかい?始めよう

WordPressでオンライン・ポートフォリオサイトを作る方法

ポートフォリオサイトを構築するために、コーディングやHTMLの書き方を学ぶ必要はありません。 私たちのステップバイステップの指示に従うだけで、あなたのサイトは数分で立ち上がり、実行されます。

1.WordPressホスティングサービスを選ぶ

始めるには、ドメイン名とホスティングサービスが必要です。ウェブホスティングサービスは、あなたのサイトのファイルを保存し、インターネット上のあなたのサイトのホームです。

良いホスティングサービスは、要求の厳しいサイトにも対応できるスケーラビリティを持ち、何か問題が発生した場合のサポートを提供し、ウェブセキュリティに真剣に取り組み、あなたの安全を守る機能を備えている必要があります。

また、サイトの読み込みが速くなるよう、最速のWordPressホスティングサービスプロバイダーを探してください。

Hostingerは、手頃な価格で初心者に優しいホスティングサービスを求める中小企業に最適です。

幸いなことに、ホスティングサービスは読者に無料のドメイン名とWordPressホスティングの大幅な割引を提供することに同意してくれた。月々わずか2.24ドルで始めることができます。

Click Start Now on the Hostinger website

Hostingerを数分でセットアップするには、このボタンをクリックするだけです:

Hostingerへの登録にヘルプが必要な場合は、ステップバイステップのチュートリアルが掲載されている無料ドメイン名の取得方法に関する投稿日をご覧ください。

ホスティングサービスの登録と設定が完了したら、ダッシュボードで「ドメイン」タブを選択します。

そこから、新しいドメイン名を入力する必要があります。

Hostinger get a domain

新規サイトの作成または既存サイトの移行を促すプロンプトが表示されます。

このチュートリアルでは、「Skip, create an empty website」をクリックしてください。

Skip website hostinger

次に、「Claim a Free Domain」の下にある「Select」ボタンをクリックしよう。

ポートフォリオサイトに必要なドメイン名を入力するだけです。

Claim free domain

ドメイン名の決定にお困りの場合、WPBeginnerは無料のビジネス名ジェネレータを提供しており、読みやすく、オンラインで宣伝しやすい会社名を見つけるのに役立ちます。

もちろん、個人的なポートフォリオを作るのであれば、一番簡単なのは自分の姓と名をドメイン名にすることだろう。もし、その名前が使われていれば、ファーストネームと一緒にあなたの職業を追加することができます。

たとえば、johndoe.comが使われていれば、johndoephotography.comや janedoewriter.comが見つかるかもしれない。

理想的には、.com ドメインの拡張子を先頭に固定表示することです。.comドメインは中小企業にとって最も認知度が高く、信頼できるからです。

2.WordPressのインストール

ほとんどの初心者が犯しがちな間違いのひとつは、間違ったサイトプラットフォームを選んでしまうことだ。多くのフリーランサーや中小企業のオーナーは、Squarespaceや Wixに惹かれます。

これらは使いやすいが、機能性、カスタマイズ、コントロールに欠ける。

WordPressのようなコンテンツ管理システムを使えば、ポートフォリオサイトのデザインやアドオンが何千種類もあり、より柔軟性が高まります。WordPressは無料でオープンソースであり、何千ものビルトイン拡張機能やサイトデザインがあらかじめ用意されています。

適切なWordPressプラグインとテーマを使えば、SquarespaceやWixのようなプラットフォームを使いやすくするドラッグ&ドロップビルダーも利用できる。

ホスティングサービスを利用する場合でも、WP Engineや Bluehostのような他のWordPressホスティングサービスを利用する場合でも、WordPressのインストール方法に関するガイドに従えば、ステップバイステップで詳しく説明することができます。

次に、Hostingerダッシュボードで、WordPressロゴのある「管理画面」ボタンをクリックして、WordPressサイトのダッシュボードに移動できます。

WP Admin Panel shortcut in Hostinger panel

ブラウザーで直接yoursite.com/wp-adminにアクセスすることもできます。

3.ポートフォリオのテーマを選ぶ

WordPressのセットアップが完了したら、テーマを選択し、新しいページを作成することで、サイトデザインをカスタマイズする準備が整います。

このチュートリアルでは、SeedProdを使ってポートフォリオサイト専用のテーマを作成します。

SeedProdは、市場で最高のWordPressページビルダーです。一行もコードを書くことなく、素早く簡単にあらゆるタイプのページを作成することができます。

見込み客を獲得するためのポートフォリオサイトの作成、WordPressブログの開設オンラインストアの開設など、SeedProdはお客様のニーズに合わせたテンプレートを提供するワンストップソリューションです。

SeedProdプラグインをインストールし、有効化してください。詳しくはWordPressプラグインのインストール方法をご覧ください。

インストールすると、セットアップウィザードを完了するよう促されます。スタート’をクリックし、ステップバイステップの指示に従って、SeedProdはあなたのニーズに最適なプラグインを設定することができます。

SeedProd setup wizard

セットアップウィザードが完了したら、SeedProd ≫ 設定に進み、ライセンスキーを入力します。ライセンスキーはSeedProdサイトのアカウントページにあります。

入力後、「Verify Key」ボタンをクリックしてください。

Verify key for SeedProd

これでSeedProdのすべての機能にアクセスできるようになります。

4.ポートフォリオのランディングページを作る

次は、SeedProd ≫ Theme Builderにナビゲーションしましょう。

ここから、「テーマテンプレートキット」と書かれたオレンジ色のボタンを選択します。

SeedProd theme builder

検索可能なWordPressテーマのライブラリがあるページに移動します。検索バーに「ポートフォリオ」と入力し、あなたのサイトのアイデアに最も適したテーマテンプレートを選択してください。

また、特定のニッチな分野であれば、他のキーワードで検索することもできます。例えば、あなたが不動産業者であれば、SeedProdで不動産WordPressテーマを見つけることができます。

ここでは「Freelance Portfolio」というテーマを選びますが、あなたのニーズに合ったテーマを自由に選んでください。

Online portfolio theme in SeedProd

私たちは1ページのポートフォリオサイトを作成します。これは、ポートフォリオページがサイトのホームページの一部であることを意味します。こうすることで、複数のページをデザインする手間をかけずに、素早くポートフォリオサイトを立ち上げることができます。

WordPressのダッシュボードで、「設定」≫「リーディング」に進みましょう。トップページの隣にある「ポートフォリオ」ドロップダウンを選択し、ポートフォリオページをトップページにします。

Set portfolio page as homepage

その後、SeedProd ≫ Theme Builderに戻ると、テーマ内のすべてのページのリストが表示されます。

ここから下にスクロールし、「ポートフォリオ」ページにマウスオーバーする必要があります。そして、’Edit Design’ボタンをクリックします。

Edit portfolio page

5.ポートフォリオサイトの編集

あとはコンテンツを編集して、自分だけのものにする。

SeedProdのビジュアル、ドラッグアンドドロップページビルダーでは、たくさんの’Standard’と’Advanced’ウィジェットを見ることができます。これらには、見出し、テキスト、リスト、ヘッダー、アイキャッチ画像などが含まれます。

欲しいウィジェットをドラッグして、その要素が欲しい正確な場所に移動するだけです。

Widgets in SeedProd

また、無地、グラデーションカラー、背景画像を選択して、背景をお好みにカスタマイズすることもできます。

外側のレイヤーボックスをクリックし、サイドバーメニューの「コンテンツ」の下に、背景をカスタマイズするオプション設定があります。

Background in SeedProd

SeedProdインターフェースの操作にヘルプが必要な場合は、SeedProdビデオチュートリアルをご覧ください。

メインのポートフォリオページのコンテンツを編集する際には、以下のようないくつかの重要な要素を含める必要があります:

強い行動喚起(CTA):ポートフォリオサイトには、訪問者が採用や連絡を取れるように、明確なCTAボタンを設置する必要があります。CTAボタンは、折り目の上とページの下の両方に配置する必要があります。

左側のメニューから「ボタン」ボックスを見つけて、右側のページにドラッグするだけです。

Call to action in SeedProd

どの要素を編集する場合でも、カスタマイズしたい特定の要素やエリアをクリックする必要があります。

そのブロックのオプションは左に表示されます。下にあるように、’お問い合わせフォーム’タブでは、ボタンのテキストを編集し、お問い合わせページや、同じページにある埋め込みフォームにリンクさせることができます。

Templates」タブではボタンのスタイルを選択でき、「Advanced」タブではパディングやフォントなどを変更できる。

Edit button SeedProd

提供するサービス: 訪問者は、あなたが何を提供しているかを知りたがっています。例えば、WordPress開発者として、カスタムプラグインのコーディング、サイトのカスタマイザー、またはゼロからのサイト構築を行っていますか?

サービスセクションを作成するには、「カラム」ウィジェットを追加し、提供する各サービスの「アイコンボックス」を挿入するだけです。

その後、要素をクリックしてサイドバーを使用することで、必要に応じてテキストやアイコンをカスタマイズすることができます。

Services page in SeedProd

私についてセクション: 見込み客やカスタマイザーは、あなたの経歴や経験についても知りたがります。人とのつながりを築き、あなたの仕事に対する情熱をアピールするチャンスです。

自己紹介」セクションを作成するには、ページに「Image Box」ウィジェットを追加するだけです。そして、自分の顔写真を追加し、あなたについて詳しく伝える説明を書くだけです。

ビジネスやブランドのポートフォリオを作成する場合は、カスタマイザーのロゴを代わりに使用することができます。

Author bio in SeedProd

お客様の声: 特に評判の良いブランドと仕事をしたことがある場合は、過去の顧客からの証言をプロバイダーとして提供することは、信頼を築くのに役立ちます。他の人があなたの仕事に満足しているのを見ることで、自分も素晴らしい仕事ができるという自信が生まれます。

お客様の声」ウィジェットをページに追加するだけです。その後、クライアントの写真を追加し、名前とお客様の声を編集することができます。さらにレビューを追加したい場合は、その人の名前の横にある「Duplicator」アイコンをクリックしてください。

Duplicate testimonials in SeedProd

6.ギャラリーを追加して作品例を紹介する

ポートフォリオサイトを作成すれば、あなたが手がけた素晴らしい仕事をすべて紹介することができます。潜在的なクライアントは、あなたの能力を見れば、あなたがその仕事にふさわしい人物だと信頼するでしょう。

そのために、最高のWordPressギャラリープラグインであるEnvira Galleryを使用します。SeedProdの’Advanced Gallery’ウィジェットを使用することもできますが、Envira Galleryはより多くの機能を提供します。

例えば、「Lightbox」画像が付属しています。これは、誰かが写真をクリックすると、トリミングやリサイズの必要なく、自動的にフルサイズで表示されることを意味します。さらに、スライドショーを追加したり、ギャラリーをアルバムに整理して作品を分類することもできます。

まず、Envira Galleryプラグインをインストールして有効化しましょう。詳しい手順については、WordPressプラグインのインストール方法をご覧ください。

有効化した後、WordPressダッシュボードのEnvira Gallery ≫ 新規追加にアクセスしてください。

タイトルバーにギャラリーの名前を付けるだけです。そして、「コンピューターからファイルを検索」をクリックして、ポートフォリオプロジェクトの画像を追加してください。

Add new gallery Envira Gallery

ポートフォリオの項目をアップロードしたら、下にスクロールして「設定」タブに切り替えます。

ここでは、表示したいギャラリーカラムの数を変更することができます。Automatic’に設定すると、各列を自動的に埋める画像の数が設定されます。

Configurations in Envira Gallery

画像サイズを変更したい場合は、「設定」タブをスクロールして「画像サイズ」オプションを見つけます。

そして、あなたのポートフォリオ項目を最もよく見せるサイズを選ぶだけです。

Image size in Envira Gallery

また、Lightboxの画像サイズを調整して、誰かが画像をクリックしたときに元のサイズの画像が表示されるようにすることもできます。

そのためには、「Lightbox」タブで画像サイズを「Original Image」に調整する必要があります。

Lightbox in Envira Gallery

そして、ページの一番上までスクロールして『公開する』を押す。

公開するボタンの下にショートコードがあります。ショートコードをコピーして、WordPressのポートフォリオページにギャラリーを追加してください。

Publish gallery in Envira Gallery

では、SeedProdのポートフォリオページに戻りましょう。

次のステップは、「ショートコード」ブロックをページの好きな場所にドラッグ&ドロップすることです。そして、サイドバーメニューの「ショートコード」ボックスにショートコードをペーストするだけです。

Shortcode in SeedProd

ショートコードをプレビューしたい場合は、ページの右上にある「プレビュー」ボタンをクリックしてください。

これでページ全体がどのように見えるかがわかる。

Preview portfolio website

ここで、Envira Galleryがポートフォリオサイトに埋め込まれていることが確認できるはずです。

Envira Galleryのライトボックス機能を使えば、各項目をクリックしてフル画像を見ることができます。

Recent projects in SeedProd

7.お問い合わせフォームの追加

見込み客を引き寄せたところで、次は見込み客から連絡をもらう番です。本当に〜してもよいですか?お問い合わせフォームを使えば、メールアプリを開かなくても直接メッセージを送ることができます。

シンプルでプロフェッショナルなお問い合わせフォームを作成するにはWPFormsが最適です。

WPForms

WPFormsはオンラインお問い合わせフォームを作成できる最高のWordPressお問い合わせフォームビルダーです。

あなたのサイトに簡単なお問い合わせフォームを作成し、潜在顧客があなたに連絡できるようにする方法を学ぶには、WordPressでお問い合わせフォームを作成する方法のステップバイステップのチュートリアルに従ってください。

フォームの入力が完了したら、ポートフォリオページに戻ることができます。

次に、’お問い合わせフォーム’ ウィジェットを使って WPForms からフォームを追加します。フォームの選択’で、作成したフォームを選択するだけです。

WPForms in SeedProd

8.ライブにする

すべてがうまくいったら、サイトを立ち上げる準備は完了です。

すべて右上の緑色の『保存』ボタンの下にある矢印をクリックするだけです。そして『公開する』をクリックします。

Publish portfolio in SeedProd

ライブサイトをご覧ください。

ポートフォリオギャラリー、ボタン、お問い合わせフォームなど、すべてが外観に表示されるはずです。

Portfolio website live example

プロフェッショナルなポートフォリオサイトが完成したら、サイトへのトラフィックを増やしたり、興味のある見込み客を育成する準備が整いました。

この投稿が、WordPressでオンラインポートフォリオサイトを作成する方法を学ぶのにお役に立てば幸いです。また、有料ニュースレターの作成方法や、バイオページへのリンクの貼り方についても、ぜひご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

27件のコメントLeave a Reply

  1. Jiří Vaněk

    I’ve approached my portfolio as a blog. I write a tech blog about what interests me, using it as a showcase of my work. So, for me, a blog can be a great addition to a portfolio, demonstrating your skills and expertise in a way that can also be enjoyable and drive traffic to your website through search engines.

  2. Konrad

    one more thing to save for the future, thank you guys
    wish me luck as i gather the courage to share my artworks with others :>

    • WPBeginner Support

      Good luck :)

      Admin

  3. Ram E.

    Thanks for another detailed guide! For more complex or bigger portfolio sites, there is also the option to create custom post types for even greater flexibility in terms of features.

    • WPBeginner Support

      That is a good option for sites with multiple content types :)

      Admin

  4. Mikolaj

    I’ve been in search of a great portfolio landing page for my art selling business, and it seems like SeedProd is just what I need. The simplicity and theme customization options are fantastic. Thanks for the comprehensive guide; I’m excited to give it a go!

    • WPBeginner Support

      We hope you enjoy using the plugin :)

      Admin

  5. Ralph

    Nice and easy step by step tutorial. I don’t really need portfolio however it gave me other idea. I will use similar concept for homepage of my blog. Above all newest articles i will place 3 big buttons/pics (sorry i don’t know how to describe it in english), that will lead to my youtube, podcast and blog. So more promotion for my other channels.
    Thanks for idea!

    • WPBeginner Support

      You’re welcome, glad our guide could give you ideas :)

      Admin

  6. Naveera Batool

    Really an interesting and helpful article.

    • WPBeginner Support

      Glad you think so :)

      Admin

  7. A Owadud Bhuiyan

    I have tried to create a portfolio site but I am not able to set the blog page as Homepage.

    • WPBeginner Support

      It would depend on the theme but if you do not set a static page under Settings>Reading, most themes set the blog page as your homepage.

      Admin

  8. Adam Michalak

    Grate artictle, highly recommend it to anyone looking to learn how to create an online portfolio website in WordPress. In today’s competitive freelance market, having a portfolio website to display your best work is essential for standing out and attracting more clients. This step-by-step guide offers valuable insights on how to accomplish this, making it a valuable resource for those aiming to build their online presence as a professional freelancer.

    I will recommend it to my friends who are just starting to work with wordpress :)

    • WPBeginner Support

      Thank you for your kind words and we hope whoever you recommend also finds this article helpful :)

      Admin

  9. William Dean Dailey

    This is the most effective and informative post I have read by you all.
    The graphics and text were easy to understand and follow through to complete the website and publish. Thank you for that. It’s the first time I have made it to publish using WordPress and am happy with the results.

    • WPBeginner Support

      Glad to hear you were able to publish your site :)

      Admin

  10. Sean Brady

    I feel that developing a portfolio website with WordPress would be a great way add to display an artist discography.

    • WPBeginner Support

      It certainly could be :)

      Admin

  11. Sharon

    I liked this Tutorial. Although I’m an Elementor page builder user, it’s nice to see other page builders out there and what they can do. I had a portfolio of my website at one point, but I can’t say I really liked it. I think I might try again and use some techniques from this tutorial. Thanks, WPBeginner for the useful tutorial! Awesome instructions!

    • WPBeginner Support

      You’re welcome and glad to hear you found our tutorial useful.

      Admin

  12. Alice Elliott

    Thank you for this very detailed tutorial about how to set up a portfolio website. However, I wonder why you chose a non-wysiwyg theme within your example. If you are targeting visual people, I would think this should be far more applicable, as it would be something they could relate to much more easily.

    • WPBeginner Support

      We went with a page builder in this guide as it adds more freedom for design :)

      Admin

  13. priya

    thanks for sharing with us .

    • WPBeginner Support

      You’re welcome :)

      Admin

  14. Shafqat Khan

    I’ve been looking for a way to create a portfolio landing page for my photography business, and SeedProd seems like the perfect solution. I love how easy it is to use and customize the theme templates. Thank you for this detailed guide, I can’t wait to try it out!

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.