• ワークスペース

WordPressでポートフォリオサイトを作る方法(7つの簡単なステップ

  • Sujay Pawar
  • 11 min read
WordPressでポートフォリオサイトを作る方法(7つの簡単なステップ

イントロ

アーティスト、デザイナー、コンサルタント、クリエイターであれば、自分の作品を紹介するためのポートフォリオサイトが必要です。

ポートフォリオのウェブサイトは、インターネット上のあなたのお店の窓です。潜在的な顧客は、あなたを見つけ、あなたの仕事を正確に把握し、あなたの仕事の例を見ることができます。

願わくば、あなたのウェブサイトを少し見ただけで、あなたを雇うに足るだけの自信があると感じてほしい。

やはり、百聞は一見にしかず、ですね。

今回は、WordPressでポートフォリオサイトを簡単に7つのステップで作成する方法をご紹介します。

また、競合他社に差をつけるためのヒントもご紹介します。

Ranktrackerの紹介

効果的なSEOのためのオールインワン・プラットフォーム

ビジネスが成功する背景には、強力なSEOキャンペーンがあります。しかし、数え切れないほどの最適化ツールやテクニックがあるため、どこから手をつければいいのかわからないこともあります。でも、もう心配はありません。効果的なSEOのためのオールインワンプラットフォーム「Ranktracker」を紹介します。

Ranktrackerの登録がついに無料になりました。

無料アカウント作成

または認証情報を使ってサインインする

最終的には、ウェブサイトとポートフォリオが完成します。あなたのクリエイティビティを世界に発信する準備が整いました。

さあ、はじめましょう

ポートフォリオサイトを持つメリット

ホームページを作成する手順を説明する前に、ホームページを持つことのメリットについて説明します。

  • 新しいクライアントを見つける- ポートフォリオウェブサイトは、あなたの作品を紹介する優れた方法です。新しいクライアントを引き付け、より多くのビジネスを獲得することができます。
  • パーソナルブランディング- ポートフォリオウェブサイトは、あなたのブランドを宣伝し、オンラインでの評判を高めるための優れたプラットフォームです。
  • 信頼性の構築- ポートフォリオウェブサイトは、潜在的な顧客との信頼関係を構築するのに役立ちます。あなたが時間をかけて制作した作品サンプルを掲載したウェブサイトを見ることで、ターゲットとなる顧客からの信頼を築くことができます。
  • 可視性- ポートフォリオウェブサイトは、オンライン上でのあなたの可視性を高め、より多くの人々にアプローチするのに役立ちます。そして、あらゆるオンラインマーケティングの手法を駆使して、興味のある訪問者をあなたのウェブサイトに呼び込むことができます。
  • 柔軟性- ポートフォリオウェブサイトは、あなたの作品を好きなように展示できる柔軟性を備えています。物理的なポートフォリオのようにスペースに制限されることもなく、ソーシャルネットワークのような制限もありません。

さて、ポートフォリオウェブサイトを持つことの利点をいくつか見てきましたが、どのように作成すればよいかを見てみましょう。

WordPressを使ったポートフォリオサイトの作り方

WordPressでポートフォリオサイトを作成するのはいかがでしょうか。WordPressは、Webサイトのコンテンツを簡単に作成・管理できる人気のコンテンツマネジメントシステム(CMS)です。

ここでは、その手順を説明します。

ステップ1:ウェブホストとドメイン名の選択

最初のステップは、あなたのウェブサイトのためのウェブホスティングサービスとドメイン名を選択することです。ウェブホストは、あなたのウェブサイトがインターネット上で生活する場所です。

ドメイン名とは、人々があなたのウェブサイトを見つけるためにブラウザに入力するアドレスです(例:www.example.com)。

ウェブホストを選択する際には、これらのことを考慮する必要があります。

  • 評判の良さ良い評判を持つWebホストを選択します。しばらくの間、周りされていると肯定的なレビューを持っているホストは、通常、良い選択です。
  • 機能WordPressのインストール、メールホスティング、SSL証明書など、必要な機能を提供するウェブホストを選択します。
  • 価格設定。手頃な価格のWebホストを選択することを確認してください。あなたが長期的な計画にコミットして喜んでいる場合、あなたは通常、良い取引を見つけることができます。
  • アップタイムとトラフィックあなたが受け取ると予想されるトラフィックを処理することができますWebホストを選択します。始めたばかりであればあまり気にならないかもしれませんが、多くのトラフィックが予想される場合は、ウェブホストがそれを処理できることを確認してください。
  • セキュリティマルウェアスキャン、DDoS保護、バックアップ、ステージングソリューションなどのセキュリティ機能を提供するウェブホストを選択します。
  • サポートあなたが何か問題がある場合は、優れた顧客サポートを提供しているWebホストを選択します。あなたのウェブホストは、あなたが望むならいつでもあなたを助けるためにライブチャットサポートを持っている必要があります。

ウェブホストを選ぶ際には、Sitegroundなど、WordPressに特化したホストを選ぶことをお勧めします。

ウェブホストを選択したら、次はウェブサイトのドメイン名を選択します。

Ranktrackerの紹介

効果的なSEOのためのオールインワン・プラットフォーム

ビジネスが成功する背景には、強力なSEOキャンペーンがあります。しかし、数え切れないほどの最適化ツールやテクニックがあるため、どこから手をつければいいのかわからないこともあります。でも、もう心配はありません。効果的なSEOのためのオールインワンプラットフォーム「Ranktracker」を紹介します。

Ranktrackerの登録がついに無料になりました。

無料アカウント作成

または認証情報を使ってサインインする

.comドメイン名は、短く、覚えやすく、広く使用されているものを選ぶようにしましょう。

ステップ2:WordPressのインストール

ウェブホストとドメイン名を取得したら、次はWordPressをインストールします。

WordPressは、ウェブサイトのコンテンツを作成・管理できるCMS(コンテンツ・マネジメント・システム)です。インターネット上で最も普及しているCMSで、全ウェブサイトの約40%を占めています。

WordPressウェブサイトのインストールは、選択するWebホストに依存します。このガイドに従って、基本的なWordPressのウェブサイトをセットアップすることができます。

WordPressをインストールすると、このように表示されるはずです。

Hello World

これは、すべてのWordPressのインストールに付属しているデフォルトのテンプレートです。これからのステップでは、これをカスタマイズして、美しくプロフェッショナルなポートフォリオウェブサイトを作成する方法を紹介します。

また、ウェブサイトの運用管理、カスタマイズができるダッシュボードが付属しています。以下のような感じです。

WordPress Dashboard

ステップ3:WordPressのテーマとプラグインをインストールする

WordPressのインストールが完了したら、次はテーマとプラグインをインストールしましょう。

WordPressのテーマは、ウェブサイトのルック&フィールを決定するファイルのコレクションです。WordPressのポートフォリオテーマには、無料とプレミアムを合わせて数千種類があります。

このチュートリアルでは、Astra WordPress テーマを使用します。

Astraは、ポートフォリオサイトなど、あらゆるタイプのウェブサイトを作成するのに適した人気のWordPressテーマです。軽量で高速、そして使いやすいのが特徴です。

さらに、あらかじめいくつかのテンプレートが用意されているので、すぐに使い始めることができます。

Astra WordPressテーマをインストールするには、WordPressのダッシュボードにログインし、「外観」→「テーマ」→「新規追加」と進んでください。

WordPress add new theme

次に、テーマ検索バーからAstraテーマを検索→ "Astra "と検索してください。検索結果にAstraのテーマが表示されます。

Pick new theme

テーマをインストールするには、「Install and activate」をクリックして、テーマを有効化します。

ステップ4:スターターテンプレートのインポート

Astraの最大の特徴は、ポートフォリオを含む何百ものスターターテンプレートがあらかじめ用意されていることです。インポータープラグインをインポートして、好きなテンプレートをインストールするだけです。

その方法はこうです。

Get Startedボタンをクリックすると、そのようになります。プロンプトが表示されない場合は、「外観」→「Astraオプション」→「インポータープラグインのインストール」で見つけることができます。

Install importer plugin

これにより、あらかじめ作成されたWebサイトのテンプレートをインポートするプラグイン「Starter Templates」がインストールされ、有効化されます。

インストールが完了したら、「ProfessionalsorPersonal Sites」タブを選択し、カテゴリーを選択することができます。

Pick type of website that you are building

今回は、「ポートフォリオと履歴書」のカテゴリーでいきます。

ここに来れば、プロフェッショナルにデザインされたポートフォリオサイトが目に飛び込んできます。

右上から好きなページビルダーを変更することができます。今回の例では、引き続きElementorのページビルダーを使用します。

Browse themes

好きなテンプレートをクリックして、カスタマイズとインポートを開始します。このウィザードを通して、いくつかの基本的な変更を行うことができます。

テンプレートをクリックするとすぐに、サイドバーのロゴカスタマイザーオプションが表示されます。ここでは、あなたのウェブサイトのロゴを更新することができます。

As soon as you click a template, you will see the logo customizer option in the sidebar.

次のステップでは、ウェブサイトの配色とタイポグラフィを変更するオプションが用意されています。

Here you have the option to change your website color scheme and typography

ロゴ、色、タイポグラフィが準備できていなくてもご心配なく。ロゴは後でいつでも外観 > Astraオプションから更新することができます。

Put your details

ウィザードの最後のステップでは、あなたの詳細を記入し、「Submit & Build My Website」ボタンをクリックするだけです。

Starter Templateプラグインは、あなたのためにウェブサイトのテンプレートをインポートし、数秒で準備が整います。

ステップ5:デモの内容を編集する

さて、テンプレートのインポートが完了しました。次はそれをカスタマイズする番です。

まず、「ダッシュボード」>「ページ」を選択します。

次に、編集したいページに移動して、Elementorで編集をクリックします。

Edit page with Elementor

Elementorのドラッグ&ドロップエディターが起動します。

ページのカスタマイズは、ページ要素をクリックして、サイドバーエディタから内容を編集するだけです。

また、エレメントをドラッグするだけで物を移動させることができます。

Elementorページビルダーでウェブサイトを編集する方法についての詳細なチュートリアルをご覧ください。

Edit website with Elementor page builder

デザインが決まったら、左サイドバーの下部にあるボタンでページを更新します。

ステップ6:ポートフォリオを追加する

ポートフォリオサイトでは、あなたの作品が主役です。そのため、サイトにアクセスした人が、すぐにあなたの最高のプロジェクトを正面から見ることができるようにする必要があります。

WP Portfolioプラグインは、WordPressでオンラインポートフォリオを簡単に作成することができるプラグインです。

プロジェクトの追加や並べ替えが簡単にできる、使いやすいインターフェイスを備えています。

さらに、コードを一行も書かずにポートフォリオをカスタマイズするための機能やオプションも豊富に用意されています。

WP Portfolioでは、3つのタイプのポートフォリオを作成することができます。

  • ウェブサイトポートフォリオ- ウェブサイトやUI/UXデザイナーに最適です。
  • 画像ポートフォリオ- グラフィックデザイナー、アーティスト、レストランオーナー、写真家、住宅建築家などに最適です。画像で作品を見せることができるのであれば、このタイプのポートフォリオが必要です。
  • ビデオポートフォリオ- ビデオグラファー、ビデオ編集者、建築家、住宅建設業者など、自分の作品をビデオ形式で見せられるすべての人に最適です。
  • シングルページのポートフォリオ- ライターやコーダーなど、自分の書いた作品をアピールしたい人に最適です。このタイプのポートフォリオでは、過去のクライアントのケーススタディや、自分の成果の一部を追加することができます。

まず、WP Portfolioを購入し、プラグインをインストール・有効化することでスタートできます。

購入すると、プラグインファイルをパソコンにダウンロードすることができるようになります。その後、それを使用するためにWordPressにアップロードすることができます.

プラグイン>新規追加で、ZIPファイルをアップロードすることで可能です。

Upload and install new plugin

次に、「今すぐインストール」ボタンをクリックして、プラグインをインストールします。

最後に、購入時に受け取ったライセンスキーを追加して、WP Portfolioプラグインを有効化します。

ウェブサイトへのポートフォリオアイテムの追加

プラグインをインストールしたところで、いよいよポートフォリオの作成です。

そのためには

  1. WP Portfolio」→「Add New」と進みます。
  2. ポートフォリオのタイトルを追加し、ポートフォリオの種類を選択します。
  3. ポートフォリオアイテムの追加」をクリックします。

Add Portfolio Items to Your Website

画像、ビデオ、メディアをポートフォリオにアップロードし、リンク、背景、追加したいコンテンツを追加します。サムネイル、カスタムフィールド、ライトボックスの寸法などは、ここで追加できます。

また、このセクションから、ポートフォリオをカテゴリー別に整理することができます。これは、ポートフォリオに複数のアイテムをアップロードする場合に便利です。

ポートフォリオアイテムが完成したら、「Publish」ボタンをクリックします。

Publish your page when ready

ステップ7:ポートフォリオの表示

今こそ、あなたのポートフォリオをページ上に表示する時です。そのためには、作品を紹介したいページでショートコード[wp_portfolio]を使用 します。

完了すると、このようなセクションが表示されます。

Display Your Portfolio

Ranktrackerの紹介

効果的なSEOのためのオールインワン・プラットフォーム

ビジネスが成功する背景には、強力なSEOキャンペーンがあります。しかし、数え切れないほどの最適化ツールやテクニックがあるため、どこから手をつければいいのかわからないこともあります。でも、もう心配はありません。効果的なSEOのためのオールインワンプラットフォーム「Ranktracker」を紹介します。

Ranktrackerの登録がついに無料になりました。

無料アカウント作成

または認証情報を使ってサインインする

そして、これで終わりです。あなたの作品を世界中に紹介するポートフォリオウェブサイトの完成です。

結論

クリエイティブな仕事をするのであれば、ポートフォリオのウェブサイトを持つことは非常に有効です。自分の作品を紹介し、クライアントとより良い関係を築きながら、オンライン上で自分がどのように描かれているかを正確にコントロールすることができるのです。

WordPressでポートフォリオサイトを作成するのは簡単です。コードを触ることなく、いくつかの簡単なステップで作成することができます。

Astraテーマを使用してシンプルなポートフォリオウェブサイトを作成し、あらかじめ組み込まれたテンプレートをインポートすることができます。次に、WP Portfolioを使用して、ポートフォリオを最適化することができます。

ポートフォリオをお持ちの方、これから作ろうと思っている方、この記事がお役に立てれば幸いです。ご質問やご提案がありましたら、お気軽に下記へコメントください。

Sujay Pawar

Sujay Pawar

CEO and Co-Founder, Brainstorm Force

Sujay is the CEO and Co-Founder of Brainstorm Force, the company behind Astra. He's passionate about the online space and writes articles to help entrepreneurs and freelancers succeed online. A father, a Youtube addict, and the brain behind numerous world-class products, you can connect with him on Twitter: @sujaypawar.

Link: Brainstorm Force

Ranktrackerを無料で使いましょう。

あなたのWebサイトのランキングを妨げている原因を突き止めます。

無料アカウント作成

または認証情報を使ってサインインする

Different views of Ranktracker app