写真やイラストなどを手がけるフリーランスのクリエイターにとって、名刺代わりになるのが、作品をまとめた「ポートフォリオサイト」です。自身の作例や実績を掲載することで、新たなクライアントとの仕事につながることもあるでしょう。

とはいえ、知人の紹介から仕事に発展するフリーランスの中には、ポートフォリオサイトを作っていないという方もいるのではないでしょうか。Web制作の専門家ではないため、納得の行くデザインのページを作るのが難しく、着手できないという場合もあるでしょう。

ホームページ作成サービスを利用することで、Web制作スキルが無くともデザイン性の高いポートフォリオサイトを作ることができます。近年提供されているサービスの中には、マウスのドラッグ&ドロップとテキスト入力だけで簡単に制作できるものが多くあるため、活用するのも手段でしょう。

今回、簡単にデザイン性の高いホームページが作れる「Ameba Ownd」の基本的な機能と使い方をご紹介します。直感的に制作できるので、ぜひ活用してみてください。

▼他のHP作成サービスを探す▼
無料ホームページ作成ツールはどれを選ぶべき?おすすめサービスまとめ

Ameba Owndとは

amebaownd_-_1.jpg

「Ameba Ownd」は、Amebaブログを提供する株式会社サイバーエージェントのホームページ制作サービスです。Amebaブログと異なりデザインの汎用性が高いのが特徴です。

デザインテンプレートが豊富にそろっているため、企業向けオウンドメディア、フリーランス向けのポートフォリオサイト、ネットショップなど様々な用途で利用できます。HTMLCSSのスキル不要でカスタマイズすることができるため、Web制作スキルに自信がなくとも簡単に制作できるでしょう。

参考:
無料でホームページやブログを作ろう - Ameba Ownd(アメーバ オウンド)

Ameba Owndの基本機能や料金

Ameba Owndはすべての機能を無料で利用できるのが特徴です。基本的な機能は下記の通りです。

・ブログ機能
・デザイン編集機能
・独自ドメイン設定
・EC機能
・アクセス解析
・CSSカスタマイズ
・複数メンバーでの管理

独自ドメインやネットショップ開設(EC機能)が利用できるなど、無料のホームページ制作サービスとしては十分な機能を備えています。

会員登録の方法

次に、Ameba Owndの登録方法についてご紹介します。

amebaownd_-_2.jpg

Ameba Owndのトップページから「無料でホームページを作成」というボタンをクリックします。すると上記のようなページに遷移するので「サイトを作成」をクリックしてみましょう。

amebaownd_-_3.jpg

すると、ログイン画面が表示されます。基本的にはAmebaのアカウントを利用してログインしますが、Yahoo!JAPAN IDやTwitter、Facebookなど様々なWebサービスとアカウント連携できます。任意の方法でログインしてみましょう。

この記事では、新規でAmebaのアカウントを作成しています。

amebaownd_-_4.jpg

Amebaのアカウント作成は、メールアドレス・ユーザー名・パスワード・生年月日・性別を入力してください。

登録後、「【Ameba会員】仮登録完了(本登録をお願いします)」という件名のメールが届くので本文に記載されたURLをクリックすることで本登録が完了します。

Ameba Owndでホームページを作る方法

任意のURL(サブドメイン)を設定する

amebaownd_-_5.jpg

Ameba Owndでホームページを解説する際、まず任意のURLを設定します。この時点では、「任意の文言.amebaownd.com」というドメインになります。後ほど、独自ドメインを設定できます。

独自ドメインを利用する場合は、この時点でドメイン販売サイトから独自ドメインを取得することで設定をスムーズに行えるでしょう。

ブログまたはホームページなど好みの形式を選択しデザインを選ぶ

amebaownd_-_6.jpg

サブドメインの設定を終えたら、ブログまたはホームページなど目的に応じて好みの形式を選びます。今回はポートフォリオサイトを目的とするため、「ホームページを作成する」を選択しました。

メディア運営や自社ブログであれば、「ブログを作成する」を選びましょう。

amebaownd_-_7.jpg

次に、デザインテンプレートから自身のイメージに近いものを選択します。ブランド・サロン・ポートフォリオなどジャンル別に分かれているので、好みのカテゴリからテンプレートを選んでみてください。

この記事では、参考までにポートフォリオのカテゴリから写真が主軸のテンプレートを選択しています。

amebaownd_-_8.jpg

任意のテンプレートを選択するとデザインを反映したポップアップが表示されます。この画面を確認し、問題が無ければ「このデザインで始める」をクリックしましょう。

再度テンプレートを確認したい場合は、ポップアップ右上に表示された「×」をクリックします。

ダッシュボードから基本設定と独自ドメイン設定を行う

amebaownd_-_9.jpg

テンプレートから任意のデザインを選ぶと、ダッシュボード画面(管理画面)が表示されます。画面中央にチュートリアルが表示されるので、タイトルなど順番に入力してみましょう。写真やブログ記事などコンテンツ以外の部分はこの時点でほぼ完成しています。

amebaownd_-_10.jpg

次に、左サイドバーにある「設定」をクリックし、「独自ドメインに切り替える」を選択します。取得済みの独自ドメインフォームに入力することで独自ドメインを反映させることができます。

クリック&ドロップでテキストや画像を配置する

次に、Ameba Owndのページの更新方法についてご紹介します。

amebaownd_-_11.jpg

ページの更新は非常に簡単です。左サイドバーのメニューにある「テキスト」や「画像」など任意のコンテンツをクリックし、画面中央の白紙にドロップするだけでレイアウトを組むことができます。

amebaownd_-_12.jpg

画像を挿入すると画像上にメニューが表示され、画像サイズやレイアウトの微調整が行えます。

amebaownd_-_13.jpg

ポートフォリオサイトとして作例を複数並べたい場合は、挿入した画像の隣に新たな画像をドロップすることで均等にレイアウトを組むことができます。左右や上下の入れ替えもクリック&ドロップで簡単に行えます。

テキストリンク、動画など様々な形式に対応しています。画像の挿入同様に自身が公開したいコンテンツを並べてみましょう。

amebaownd_-_15.jpg

一通りのレイアウトを終えた後、編集画面右上にある「ページを更新」をクリックすることで、上記でレイアウトしたデザインがホームページとして反映されます。

完成したホームページがこちらです。編集画面でレイアウトしたそのままが表示されるので、編集時と公開時のギャップがほぼ無いのがメリットです。

ページの追加やブログの設定も上記の手順同様にクリック&ドロップで行えます。必要に応じてコンテンツを追加してみてください。

まとめ

Ameba Owndは、テンプレートからデザインを選び、文字や画像素材を入力するだけで簡単にホームページを制作できるのが特徴です。

また、無料で利用できるにもかかわらず、独自ドメインを設定できるため、「クライアントに提案するためにポートフォリオサイトが至急必要」というフリーランスにとっても活用しやすいのではないでしょうか。

WordPressのようなCMSと比べ、カスタマイズ性が乏しいというデメリットもあるため、テンプレート一覧から気に入ったデザインがあるか利用するまえに確認してみましょう。

▼他のHP作成サービスを探す▼
無料ホームページ作成ツールはどれを選ぶべき?おすすめサービスまとめ