Webデザインポートフォリオをオンラインで作成する方法

公開: 2020-05-11

ウェブデザイナーであるあなたは、あなたのキャリアの中でこれほど熱心に取り組んできたプロジェクトに誇りを持っています。 これはただ一つのことを意味することができます-あなたの最高の作品を集めて展示する時が来ました。 あなたがあなたの作品をどのように提示するかはあなたのプロ意識を物語っています。 きちんと整理された方法であなたのデザインを紹介することはあなたの最大の利益です。 これは、Webデザインポートフォリオが介入する場所です。

あなたの顧客や雇用主は、あなたの作品やプロジェクトについて聞くよりもむしろ見たいと思っています。 良いポートフォリオは彼らにその機会を与え、あなたが彼らの信頼を勝ち取るのを助けます。 Webデザインポートフォリオを正確に作成する方法に興味がある場合は、読み続けてください。 この記事では、プロセスを段階的に説明します。

RenderforestのWebサイトテンプレートの1つを使用して、ポートフォリオを作成します。 それでは、ナビゲーションメニューの「 Webサイトの構築」に移動して、作成を開始しましょう。

レンダーフォレストのウェブサイトビルダー

Webサイトビルダーページにアクセスすると、Webサイトテンプレートのいくつかのカテゴリとサブカテゴリが表示されます。 ニーズに合ったものを選択してください。 Webデザインポートフォリオの場合、[パーソナル]カテゴリで[ポートフォリオ]を選択するか、[アート]カテゴリで[デザイン]を選択できます。

ウェブサイトテンプレートカテゴリ

または、[すべて]をクリックして利用可能なすべてのテンプレートを開き、検索バーを使用して必要なテンプレートを探すこともできます。

検索バーを使用してテンプレートを検索します

カテゴリを選択すると、さまざまなWebサイトテンプレートから選択できるようになります。 次の図は、ポートフォリオのオプションを示しています。

ポートフォリオウェブサイトテンプレート

いずれかを選択したら、それをクリックしてテンプレートの全画面プレビューを表示します。 「WebDesignerCV」を選びました。

テンプレートをプレビューする

プレビューページでは、下にスクロールしてテンプレートを表示したり、デスクトップ、タブレット、電話の画面でどのように表示されるかを確認したりできます。

デスクトップ、タブレット、電話でプレビュー

さらにテンプレートを閲覧したい場合は、左隅の「テンプレートに戻る」をクリックしてください。 選択したテンプレートに満足したら、右上隅にある[適用]をクリックします。

テンプレートを適用する

「適用」ボタンをクリックすると、Webサイトメーカーエディターに移動します。ここで、テンプレートを編集して完全にカスタマイズできます。 それで、それがどのように行われるか見てみましょう。

テンプレートのカスタマイズを開始します

テンプレート内のすべての要素はカスタマイズ可能です。 これが、作業を非常に柔軟にする理由です。 まず、ヘッダーの調整から始めましょう。

ヘッダーをカスタマイズする

左側には、ロゴを付けるためのオプションがあります。 右側では、背景色を変更できます。 ヘッダー全体を別のものに置き換える場合は、背景色のすぐ横にある[置換]をクリックします。

ヘッダーを置き換える

それをクリックすると、ヘッダーセクションの他の多くのオプションが表示されます。 適切なものを見つけたら、「交換」ボタンを押します。

ヘッダーの置換

ヘッダーがどのように表示されるかを決定したので、ナビゲーションメニューの作成を開始できます。 不要なメニュー項目を削除するか、「リンクを追加」をクリックして新しいメニュー項目を追加してください。

メニュー項目-リンクを追加

メニュー項目にリンクを添付するには、ハイパーリンクアイコンをクリックします。

アンカーリンクアイコン

新しいウィンドウが開き、メニュー項目名を編集して、ページの特定のセクションへの外部リンクまたはジャンプリンクを挿入できます。

リンク追加ウィンドウ

最後に、「コンポーネント」ボタンがあります。 それはあなたがあなたのウェブサイトに他のどんなテキストまたは視覚的な構成要素も加えることを可能にします。

コンポーネントを追加

CTAや価格設定から、FAQやソーシャルメディアのリンクまで、考えられるあらゆるコンポーネントを見つけることができます。

コンポーネントウィンドウ

ヘッダーセクションが完成したら、さらに下に移動して、同じ方法で他のセクションをカスタマイズし続けます。 ページに表示されているブロックを変更、置換、削除、または追加できます。

テンプレート内のテキストを編集するには、それをクリックして入力を開始するだけです。

テキストボックスを編集する

アイコンを変更するには、編集ボタンをクリックすると、新しいウィンドウがポップアップ表示されます。

アイコンを編集する

ここでは、検索バーを使用して必要なものを探すことができます。 アイコンを選択して[保存]をクリックすると、アイコンが置き換えられます。

アイコンウィンドウ

このテンプレートには、作品やデザインの写真専用のセクションがあります。 表示する画像の数を選択し、画像アイコンをクリックして画像を追加します。

画像をアップロードする

ファイルをアップロードしたり、画像のURLを挿入したり、メディアライブラリから写真を選択したり、ストック画像を閲覧したりできます。

画像アップロードオプション

ページの一番下に、ソーシャルメディアリンクを添付するオプションがあります。 アイコンを選択し、ソーシャルリンクを挿入して、訪問者とアカウントを共有します。

ソーシャルメディアのリンクを追加する

移動すると、ページの左側にあるサイドバーメニューに気づいたかもしれません。 サイドバーには、デザインポートフォリオ用の追加の編集ツールが用意されています。 ツールとその機能を簡単に見てみましょう。

サイドバーメニュー

最初のツールでは、テキストのフォントとサイズを調整できます。 自分のスタイルにぴったりのフォントが見つかるまで、フォントを試してみてください。

テキストツール

すぐ下に、ページ上のボタンと要素の形状を制御する「スタイル」ツールがあります。 丸みを帯びた、角のある、鋭いエッジの3つのオプションがあります。

スタイルツール

次は、「カラー」ツールです。 かなり自明です。 それはあなたが色を選ぶことを可能にします。 デザインチームが提案するカラーパレットを試すか、ブランドカラーを追加することができます。

カラーツール

次のツールは「ページ」と呼ばれます。 新しいページを追加したい場合は、このツールを使用して行います。 「新規追加」をクリックし、ページ名を入力して作成します。 その後、先に進んでカスタマイズすることもできます。

ページツール

「ウィジェット」ツールを使用すると、ポートフォリオにツールや機能を追加できます。 今のところ、利用可能なウィジェットはライブチャットだけです。 あなたはいくつかのライブチャットサービスプロバイダーを見つけるでしょう。 いずれかを選択し、提供されたリンクをたどって設定方法を学びます。

ウィジェットツール

最後になりましたが、「設定」ツールがあります。 これにより、ページのより技術的な設定を微調整できます。 設定には、一般、ページ、ドメインの3つのカテゴリがあります。 一般設定は、Cookieバーの表示、ファビコンの編集、ソーシャルイメージの選択などを担当します。

一般設定

「ページ」設定は、ページタイトル、メタ説明、およびキーワードを設定するのに役立ちます。 最後に、「ドメイン」はあなたのウェブサイトのドメイン名を扱います。 カスタムドメインまたは無料のRenderforestサブドメインのいずれかを選択できます。

ドメイン設定

最終設定を調整したら、ポートフォリオの作成はほぼ完了です。 おめでとうございます! ただし、このチュートリアルを終了する前に、トップバーについても簡単に説明しましょう。

ここには、変更を元に戻したりやり直したりできる2つの小さな矢印があります。 誤って間違った動きをした場合でも、心配しないでください。いつでもダメージを元に戻すことができます。

変更を元に戻し、やり直す

次に、ポートフォリオへの編集リンクを、プロジェクトをさらにレビュー、校正、編集できる寄稿者と共有するオプションがあります。 編集リンクをアクティブにしておく時間を決定します。

あなたのプロジェクトを共有する

[プレビュー]ボタンを使用すると、ページを公開する前にページがどのように表示されるかを確認できます。 ここでも、デスクトップ、タブレット、電話でポートフォリオをプレビューできます。

最後に、すべてが完璧で、ポートフォリオが素晴らしいように見えることを確認したら、待望の「公開」ボタンを押すことができます。 プロジェクトは自動的に「マイウェブサイト」に保存されます。 いつでもアクセスして編集できます。

あなたのウェブサイトを公開する

プロジェクトが正常に作成されたようです。 さあ、あなたの卓越したウェブデザインポートフォリオで世界を征服しましょう!

下のボタンをクリックして、今すぐ独自のWebサイトを構築してください。

今すぐ作成