ポートフォリオ作成ガイドシリーズも第三弾となり、いよいよ実際のコーディングに移っていきます。
プログラミング、特にフロントエンドの開発というのは山登りのようなもので最終的な目的地は頂上に辿り着くこと、プログラミングで言うと依頼書通りの見た目を作り上げること。
しかし、そこに至るまでのやり方は一つではありません。自分がやりやすい方法と誰が見ても分かりやすい方法は違うかもしれません。
しかし、実際のコーディングの現場で評価されやすいのは後者でしょう。そのため本記事ではポートフォリオ作成段階で注意すべきことを具体的に4つの項目に分けてお話ししていきたいと思います。
この記事を読んでできるようになる事
・就活や案件獲得に有利なポートフォリオとはどんなものか理解できる
・現段階のコーディングの癖を矯正できる
・どのような機能をポートフォリオに実装するのが効果的かわかるようになる
それでは早速本題に移っていきましょう。
注意点①：コードの品質と可読性
一つ目はコーディングを行う際の品質を意識する事です。
特にHTMLで言えばclassやidなどの命名規則に沿った命名ができているか、やCSSに無駄なコードが含まれていないか？などが該当します。
近年、サイト制作の見た目はWordpressやノーコードのツールで作成することも増えており0からHTMLを打ち込んで作成することは少なくなっているとはいえ、まだまだ現役の言語です。
例えば、test1、test2というクラス名がつけられた2種類の要素があったとします。
両方ともに同じCSSを当てたい場合下記のように記載していませんか？
.test1 {
/*文字の色を赤色にするCSS*/
color: red;
}
.test2 {
/*文字の色を赤色にするCSS*/
color: red;
}上記の書き方でももちろんCSSはしっかりと反映されますが、実際の開発現場では下記のような書き方が好まれます。
.test1, .test2 {
/*文字の色を赤色にするCSS*/
color: red;
}クイズなどの問題文と同じで情報量が多いとそれだけでわかりずらく読む気を無くしてしまうことも少なくありません。そういった些細な積み重ねが業務の非効率化を招きかねません。
その為、出来るだけコードの記述量は少なくし、ぱっと見で分かりやすい記述を心がけていきましょう。
レスポンシブデザインとアクセサビリティ
ポートフォリオでwebサイトを作成する際は必ずレスポンシブ対応(異なるデバイスや画面サイズに対応したデザイン)を行なって下さい。
現在、情報検索の主流はPCよりもスマホがメインです。その為、実際の案件でレスポンシブデザインも含めて依頼されることがほとんどです。
また、アクセサビリティについてですがデザインの段階からユーザーが利用しやすい設計にする事が重要です。
具体的な例としては
・見やすいフォントを使用
・テキストの色味やコントラストを配慮
・デジタル操作が苦手な人でも分かりやすい
などが挙げられます。
昨今のデザイン業界では見た目のみに重点を置くのではなく、ユーザーの使いやすさなども重視されておりいかにストレスなく情報を得る事ができるかという部分に注力する必要があります。
デザインの考慮とポートフォリオ全体の一貫性
デザインは技術的な実装だけでなく重要な要素です。モダンで魅力的なデザインを意識し、色彩やフォントの統一性を保ちましょう。
色使いやコントラストなどの基礎的なデザインの知識は[chot.design]というサイトで学習する事ができます。
そして、デザインの参考として[canva]などのデザイン制作ツールのテンプレートなどから自分の好みのデザインを探しましょう。
リアルなユースケースの組み込み
ポートフォリオには、実際のユーザーが体験できるデモやサンプルがあると良いです。
例えば、サイトのインタラクティブな要素やフォームの入力チェック、APIとの連携などを組み込んで、自身の技術力を証明することができます。
まとめ
ポートフォリオ作成は初心者が最初に作る自分の作品ということでいまいちどのような構成にしたら良いかなど決めかねている人もいらっしゃるかと思います。
そういった方に向けて、作成時に上記の4つのポイントに注意することでアイデアを固める手助けになればと考えております。
最後に、ポートフォリオ作る前にサイト作成そのものを練習したいという方向けに、[CodeJump]というサイトにレベル別のサイト作成練習問題が掲載されていますので、そちらをご覧いただければと思います。
おみその日記 