【Ameba Ownd】初心者でもすぐできるポートフォリオの作り方

19086 ワード
初心者 ポートフォリオ AmebaOwnd フリーランス 初心者 テキストリンク

ポートフォリオ とは

経歴や能力を伝えるための作品集です。
面接や顧客への売り込みの際に、「自分に何ができるのか」をアピールする重要なツールになります。

フリーランスとして自分を売っていくのなら、今の自分の価値を表現してみましょう。

Ameba Ownd

手軽に簡単に、しかも無料でポートフォリオを作るならAmeba Owndがおすすめ。
初めてポートフォリオを作る人でも、直感的に作ることができます。
もちろん、スマホ表示にも対応しています。素晴らしい。

また、HTML,CSS,JavaScriptのコーディングができる人は
標準機能以上のスタイリッシュなページを作成することが可能です。

HTML,css,JavaScript勉強中の方、チャレンジしてみてはどうですか？

実際に作ってみよう

1.まずは登録


入力フォームに従って、登録を進めます。
アメーバIDを持っていない方は、このタイミングで登録してください。

2.URL決めよう


ポートフォリオのURL決めることができます。
無料でここまでできるのはすごいですね。

※URLは後から１度しか変更ができないのでご注意を

3.テンプレートを選択


好みのテンプレートを選択します。
テンプレートは後から変更が可能です。

4.登録完了


はい、簡単。
ここから自分好みのポートフォリオに仕上げていきます。

よりスタイリッシュに

せっかく作るなら、わかりやすくてスッキリしているものを作りたいですよね。
ここで私が自分のポートフォリオを作る際に行ったことを紹介していきます。

画面レイアウトを決める


これはメインページの編集画面です。
まずは自分がどのような内容のポートフォリオを作りたいかをイメージして、大まかなレイアウトを決めてみましょう。
イメージが難しい方はググってみると素晴らしい作品がたくさん出てくるので調べてみてください。

素材を集める


せっかくWebページを作るのであれば、視覚的にわかりやすいものにしたいですよね。
フリー素材などを扱うサイトで自分に適した素材を集めてみましょう。
私は、集めた素材に今まで対応した案件の概要をAdobe Illustratorで書き込んでみました。
※この辺りはセンスが重要です。

問い合わせフォームを作る

Ameba Owndには問い合わせフォームがありません。
なので、「fromzu」を使って自分だけのお問い合わせフォームを作りましょう。
メールアドレスの登録のみで、あとは簡単、１０分あれば作成できちゃいます。
簡単な問い合わせフォームであれば、無料版で十分です。

コーディングする


冒頭でも紹介した通り、Ameba OwndはHTML形式でのデザイン作成が可能です。
より自分にマッチするポートフォリオを作りたい方はぜひこの方法にチャレンジしてみてください。

私のポートフォリオで使っているコードをいくつか紹介します。

・文字フォントの変更

標準機能ではフォントの変更がほとんどできません。
なのでGoogleフォントなどの外部フォントを利用する際には、HTML形式でコーディングする必要があります。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Amethysta&family=Roboto+Slab:wght@100&display=swap" rel="stylesheet">
<style>
  .title{
  text-align: center;
  font-family: 'Amethysta', serif;
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
}
</style>
<div class="title">Hello World</div>

・標準デザインへのCSS適用


標準でセットできるボタンなどのレイアウトにCSSを設定することができます。
文字フォントやサイズなどを調整したい場合は、この方法で対応可能です。
私はボタンの文字サイズが小さかったので、少し大きくしてみたのと、
画像をクリックするとズームされるのが鬱陶しかったので、リンクを無効にしました。
(Ameba Owndさん、ごめんなさい)

a.btn__item {
  font-size: 20px;
}
a.img__item {
  pointer-events: none;
}

・グラフの挿入


エンジニアの方のポートフォリオを見ていると、自分が扱っている言語などをグラフ表記で表現されている方をよく見かけます。
視覚的でかっこいいですよね。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Amethysta&family=Roboto+Slab:wght@100&display=swap" rel="stylesheet">
<style>
.graph-cont{
  width: calc(100% - 40px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.bar{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: -2;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  background: #5db1bf;
  height: 30px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.bar1::after{
  max-width: 98%;
}
.bar2::after{
  max-width: 90%;
}
.bar3::after{
  max-width: 60%;
}
.bar4::after{
  max-width: 30%;
}
.bar5::after{
  max-width: 95%;
}
.bar6::after{
  max-width: 93%;
}
.bar7::after{
  max-width: 92%;
}
.bar8::after{
  max-width: 80%;
}
.bar9::after{
  max-width: 75%;
}
.bar10::after{
  max-width: 40%;
}
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.how-cont{
  width: calc(100% - 40px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
code {
  padding: 5px;
  background: #ecf0f1;
  display: block;
}
pre{
  padding: 0;
  margin: 0;
}
.title-graph{
  text-align: center;
　 font-family: 'Amethysta', serif;
  font-family: 'Roboto Slab', serif;
  font-size: 25px;
}
</style>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>

<div class="graph-cont">
  <h1 class="title-graph">Coding languages</h1>
  <div class="bar bar1">VB.Net</div>
  <div class="bar bar2">C#</div>
  <div class="bar bar3">Ruby</div>
  <div class="bar bar4">PHP</div>
  <div class="bar bar5">HTML</div>
  <div class="bar bar6">CSS</div>
  <div class="bar bar7">JavaScript</div>
</div>

<div class="graph-cont">
  <h1 class="title-graph">Others</h1>
  <div class="bar bar8">Adobe Premiere Pro</div>
  <div class="bar bar9">Adobe After Effects</div>
  <div class="bar bar10">Unity</div>
</div>

終わりに

私も今回初めてポートフォリオなるものを作ってみましたが、
Ameba Owndのような画面だけで完結するようなホームページ作成サイトでは、
自分が思ったようなデザインが作れないかと思っていましたが、そんなことはありませんでした。

「作ってみよう！」と思い立ってからものの数時間で自由度の高いポートフォリオが作れるんだから驚きです。

まだ自分だけのポートフォリオを持っていないという方は、ぜひ参考にしてみてください。