オラ！アジャノです！
今回は私のWebエンジニアとしてのポートフォリオを公開したので、特に気を付けたポイントなどを紹介します！
Web制作に興味のある方、始めたばかりの方は特に参考になる内容になっていると思うのでぜひご覧ください！
未経験からポートフォリオを自作しました（Webエンジニア）
ポートフォリオ概要と勉強方法
まず、ポートフォリオはこちらです。
既存のテーマは使わずに、１から作ってそれをWordPress化しています。
製作期間は、ゆっくり作ったので構想も含めてだいたい２週間弱くらいです。
そしてWeb制作の学習を開始してから３ヶ月ほどで制作しました。
使用言語はHTML, CSS, jQuery. Bootstrap, PHPです。
ちなみにどうやって勉強したかと言いますと、以下の教材を使いました。
使用教材
特にUdemyのたにぐちまことさんの教材は説明が本当に親切でわかりやすく、何度も参考にさせていただきました。感謝です。PHPの勉強を始めるには必須の教材と言っても過言ではありません。
現在Udemyの講座がセール中です！セール中の今ならなんと2000円以下で講座を受けられるので、買わないと損です。
>> Udemy公式サイトへ
それでは制作する上で気を付けたポイントを紹介していきます！
これからポートフォリオを作る予定のある方は特に参考になると思います。
パソコンでのレイアウト
HOME（メイン）
印象的なものにできたと思います。
これはテキストマスクというものです。
実際にサイトを見ていただければわかるのですが、常に動く仕様になっています。
全体的にシックなデザインにしたのですが、ここでインパクトの強いファーストビューを作ったことで、それがアクセントになるようにしました。
『WELCOME TO AJANO'S PORTFOLIO』の配置はスマートフォンではまた違うのでそれもぜひ見てみてください！
ABOUT（自己紹介）
自己紹介のセクションです。
ここでは見出しに赤と黒のグラデーションを付けました。
ベースの色は黒、白、ベージュなのですが、この部分と最後の部分で赤を入れることでアクセントになるように意識しました。
自己紹介では少し市場価値を上げることができたらいいなと思い、英語、スペイン語、フランス語が使用可能ということを書きました。
翻訳サイトなどなら１人で一気に受けられるのでこれは強みかなと思いました。
Skillは使用可能言語を書いています。
アイコンは全てFont Awesomeを使っています（無料です）
Twitterやこのブログも載せています。
SERVICE（提供可能なサービスの紹介）
このセクションではお客様に提供できるサービスを紹介しています。
ここでも何か人と違う価値が提供できれば市場価値が上がるのではないかと思い、Webマーケティングを勉強しました。
GoogleやFacebookなどの広告運用を学びました。
なお、のちのWorkでもそうですが、スクロールして要素に近付いたら下からフェードインする仕様になっています。
これはjQueryで実装しています。
ところでこの右下の▲。
気になった方も多いのではないでしょうか？
これは「トップへ戻るボタン」です。
画面のスクロール位置を取得して途中から現れる仕組みになっています。
つまり、最初は表れていないけど、ある程度下に行ったら出現するというものです。
WORK（今までの模写）
このセクションでは今までにしてきた模写を載せています。
私は模写よりも実際のサイトを作ってみたりカスタマイズする方が好きなので、模写の数は少なめです。
ただ模写は圧倒的に力がつくので、数個はこなしておいた方がいいのではないかと思います。
マウスを作品の近くに持っていくと（ホバーすると）浮かび上がるようにしています。これはCSSです。
ボタンは結構エレガントなデザインにできたのではないかと思います。
これは「モーダルウィンドウ」というものでjQueryで実装しました。
「クリックすると作品の全体が見れる」というものです。
ここは結構苦戦しました。
jQuery自体の内容はあまり難しくないのですが、写真自体の大きさや位置を調節するのが意外と難しかったです。
CONTACT（お問い合わせ）
最後のセクションはお問い合わせです。
これはワードプレスのプラグインである『Contact Form 7』で実装しています。
プラグインの設定を行い、ショートカットコードを貼る・・という感じです。
デフォルトのままではあまりかっこよくならないので、カスタマイズすると差別化ができると思います。
お問い合わせ欄を作る時は必ず世に出す前にちゃんと自分のメールに届くか確かめておきましょう。
ちなみに、無料でWordPressのWeb制作を学習する方法があります！
TechAcademy [テックアカデミー]は、受講生数No.1のオンラインプログラミングスクールです。
おすすめ
↑ テックアカデミーの無料カリキュラムでガッツリ学ぶこともできるので、オススメです！
スマートフォンでのレイアウト
続いてはスマートフォンでのレイアウトです。
「スマートフォンも一緒じゃないの？」
と思ったかもしれませんが、違います。
レスポンシブ対応といって、PC、タブレット、スマートフォンそれぞれで見やすいようにレイアウトを変えなければなりません。
とは言っても全ての部分ではなく、文字の大きさやナビメニュー、要素の並べ方くらいの場合が多いです。
ここではスマートフォンでのレイアウトを簡単に紹介します。
ハンバーガーメニュー
ハンバーガーメニュー（画像の右上）を付けました。（３本の線がハンバーガーに見えることから）
ここは王道を行きました。
ハンバーガーメニューをクリックするとメニューがふわっと浮かび上がるエフェクトをCSSとjQueryを組み合わせて付けています。（通常はメニューが上から降りてくるものが多い印象を受けます）
これ、最初謎の隙間ができて丸一日苦労しました笑
paddingやmarginを見てもどこにもなく・・。
このように制作していると謎のエラーが出ることがあるので、デベロッパーツールを見てわからなかったらひたすらググりましょう。
あと、PCでもそうなのですが、ナビゲーションメニューをクリック（ページ内リンク）するとただそこに飛ぶだけではなく、スムーズにスクロールしながら辿り着く仕様になっています。
これはjQueryで実装しています。
jQuery便利すぎますね。
ただやはりどうしても若干重くなるのでJavaScriptもちゃんと学んでいきたいと思っています。
複数行を１列にして読みやすく
ここではパソコンのレイアウトでは２行や３行にしていたものを１行にまとめています。
スマートフォンの画面サイズでは１行が基本的に最適だと思います。
あまり情報量が多くない場合や小さくても大丈夫な場合は２行でもいいのですが、私の場合はある程度の情報量があると思ったので、１行にしました。
こちらはBootstrapのあの有名なグリッドシステムに助けられました。
グリッドシステムを使いこなせばレスポンシブの作業効率をぐっと上げることができます。
できるだけオリジナリティーを目指したので、グリッドシステムと余白の調整以外ではBootstrapを使用しなかったです。
ポートフォリオはWebエンジニアの名刺に近いかもです
いかがでしたでしょうか？
ポートフォリオ不要論の方もいますが、名刺代わりにもなるかなと思って作ってみました。
ポートフォリオとブログがあれば、何もないよりかなり信用度があるのではないかと思います。
その効果については後日追記しようと思います。
これからは案件獲得に向けて進んでいきます。
お仕事の依頼はこのブログやポートフォリオのお問い合わせ欄、またTwitterのDMでも受け付けています。
LP制作やコーポレートサイトを含め、Web制作全般を承りますのでお気軽にお声掛けください！
今日も読んでいただきありがとうございます！