先日、ポートフォリオは自作とテンプレどっちがいい？という記事を書きました。
https://hoshi-log.com/portfolio-template/
この記事ではポートフォリオに載せるべき実績について焦点を絞って書きます。
実績がないんだけど、どうしたらいいの？
模写コーディングってポートフォリオに載せてもいい？
というWebデザイナー、コーダー、フロントエンドエンジニアを目指してる方は読み進めていただければと思います。
この記事では、
- 模写コーディングとは？
- 模写コーディングはポートフォリオに載せてよい？
- おすすめのチュートリアルを教えて
- 架空サイトの作り方
について書いていきます。
▼Twitterで人気爆発！未経験から副業・フリーランスになりたい人向けスクール▼
https://hoshi-log.com/day-tra-review/
模写コーディングとは？
まず模写コーディングについてです。
自分が未経験だった時、模写コーディングという言葉自体なくて、写経といってJSのコードを同じように上から書いていく練習法がありました。
模写コーディングは写経とは微妙に違いがあります。
恐らく「模写コーディング」という名称、やり方は
はにわまんさんが提唱されたようです。今や駆け出しの方は皆さんやってるようなので、
はにわまんさんすごいですね。
やり方をOKとNGにわけて挙げました。
- フォントは調べてもOK
- 素材の利用OK
- 幅の計測OK
- 色の取得OK
- ピクセルパーフェクトでなくてOK
- ブレークポイントはそれっぽくでOK
ソースコードの確認は基本NG
ポートフォリオに模写コーディングをいれる？
さて先日アンケートを取ったところ以下結果になりました。
結果は11人中4人が載せていて、7人が載せてないという結果でした。
面接官経験もある自分の個人的な結論としては、載せない方がいいかなと思います。
もちろん模写コーディング自体を批判するわけではないです。
むしろ他のサイトのソースを見るのは重要なので一通りできたらサイトの命名ルールやらを学ぶにもいいと思います。
ただポートフォリオに実績や作品として載せるには弱いのかなと思います。
自分のポートフォリオなんだから何を載せるが勝手だろ！と思われるかもしれませんが、一つの意見として受け入れてもらえればOKです。
理由としては、面接官からしたら、模写コーディングという言葉自体知らない可能性はありますし、どうしても答えがある分、どこまでを自分で書いてどっからソースを見たのかかが分かりづらい、つまり実力がわかりづらいです。
あくまで勉強として留めておく、もしくはそれを活用してデザインを変えてみるなどは難しいかもしれませんがいいかもしれません。
ポートフォリオに載せるべき実績・作品は？
ポートフォリオに載せるべき実績・作品は3種類あると思います。
以下は難易度易しい順です。
クラウドソーシングで案件を受注できたり、知り合いにサイトを作ってほしいと言われたらいろいろ注意点はありますがその方が実務であるため効果は大きいです。
クラウドソーシング&知り合いの案件で注意する点
クラウドソーシング&知り合いの案件で注意する点は以下です。
- 1～2ヶ月はかかる
- 顧客によっては中々進まない
- 作りきれるかわからない
つまり、納品時期が不明瞭であったり、実務経験が少ないとすべて一人で完成できるかが分からないと言った不安要素はあります。
そのため余程自信がない限りは架空サイトを自分で作ってみることをおすすめします。
架空サイトを作るメリット
- 自分が作りたいサイトが作れる
- WFやデザインなども総合的なサイトをつくる力がつく
-
スライスする
- 自分のペースで作れる
- UI、UXも考えれる
模写コーディングは上記のようなメリットはないと思うので架空サイトも作ってみることをおすすめします。
架空サイトの作り方
1.業種を決める
いろいろサイトを見て業種を決めます。
「Webサイト まとめ」でgoogle検索すると様々な業種をまとめたサイトがいろいろでてきますので、まずは業種を決めます。
昔、自分の技術ブログの方でまとめサイトをまとめた記事を書いてますのでよかったら参考にしてみてください。
業種を決める時のポイント
・自分が作りたいと思える業種
・作り易そうな業種
がいいです。
あまり考え込まずで大丈夫です。
例えば飲食店とかは割と自由でシンプルなサイトが多いので楽しいかもです。
楽しくはないですが、硬めのコーポレートサイトもコーディングの基本が詰まってるのでおススメです。
注意なのは要素が多いサイトです。3カラムとか、サービス系のサイトは時間がかかるためやめた方が無難です。
2.参考サイトを決める
業種に絞った参考サイトを見つけます。
検索は「業種名+サイト」です。これで画像でソートします。
例えば「水族館 サイト」で検索すると以下のように参考サイトがいっぱい出てきますね。
これも同じように
・自分が作りたいと思えるサイト
・作り易そうなサイト
を2、3サイト選んで組み合わせましょう。
自分に都合がいいように組み合わせて大丈夫です。
例えばTOPのメインビジュアル周りはAサイトがいいけどその下はBサイトのニュースを入れようなど。
3.サイトの仕様を考える
全部埋めなくていいですが、以下を埋めます。
ちなみに実際の案件でも使えます。
- プロジェクト名
- 想定URL
- ターゲット
- ペルソナ
- キーワード
- コンテンツ
- ページ
- スケジュール
- 参考サイト
- テイスト
4.WF（ワイヤーフレーム）
WFとは骨組みです。
自分がいた制作会社ではExcelやパワーポイントで作ってましたが、最近はXDなどもあります。
WF用のツールとか逆にめんどくさかったりするので小規模サイトや架空サイトの場合であればざっくり簡単に使えるExcelなどのツールで良いと思います。
先ほど決めたページとコンテンツを具体化します。
こちらもイメージが付かなければ「ワイヤーフレーム」で画像検索してイメージを掴みましょう。
手順としては大きい→小さいです。つまりグローバルナビゲーションに入れるページを決めて、そのページ内のコンテンツを決めて、細かい要素を決めていきます。
以下、例です。
ページ
ページ内のコンテンツ
- TOP
└メインビジュアル
└ニュース
└...etc
細かい要素
5.デザイン
デザインで注意する点は以下です。
あとはなるべくcssで表現できるようにするのがいいのですが、難しい人は考えなくて大丈夫です。
6.コーディングする
いよいよコーディングしていきます。
コーディングのいろいろはこちらの記事では全体をざっくり説明したいので省きます。
もし躓いたら自分に
DMで聞いてくれる人もいるのでそうしてもらえればと思います。
もちろん無料ですよ！
注意：架空サイトは時間かかります
１つデメリットというか注意点をあげるとしたら架空サイトも割と時間かかります。
自分は職業訓練校で1日8時間週5でやって1ヶ月かかったので、がっつりやる時間があっても2週間はかかるかなと思います。
ただ、こういったコーディングやプログラミングやデザインに近道はないと思っています。
成長が早い人は、飲み込みがいいとかもありますがそれだけ時間をかけて自分のものにしています。
また時間をかけた分自分のものになりますので時間がかかってもめげずに頑張って欲しいと思います。
もしもう少し短く終えたければページ数を2～3ページにしてしまうのも手です。
チュートリアルで実績を増やす
まだ架空サイト制作までできる自信がない方は、チュートリアルを作り上げてみましょう。
以下は、今風な1ページコーポレートサイトデザインのチュートリアルです。
14日後にコーダーになるネコ｜hoshi｜note
14日で1サイト作れるnoteのまとめです。 HTML、CSS、JSが学べます。 サイトを作成をする上での考え方、コードすべてを画像付きで解説しています。 photoshopなしでも大丈夫、ポートフォリオに乗せれる実績が作れます。 最終的にはwordpress化もしていますので、こちらを実績に仕事を取ることも可能です。
体系的に学びたいならプログラミングスクールもおすすめ
絶対にIT転職したいという強固な意志を持っている方ならプログラミングスクールをおすすめします。
なぜなら以下が理由です。
- 辞められない状況が作れる
- ポートフォリオの作り方や載せるべき実績を作れる
- 転職のサポートがあるため独学より有利
おすすめのスクールは以下です。
1.ウェブフリ
- 受講生ごとの興味・適正に合わせてオリジナルカリキュラムを作成してもらえる
- いつでも講師にチャットで質問可能で、学習コーチがモチベーションを維持してくれる
- 受講中にリアルな案件を担当して練習することが可能
ウェブフリは、フリーランスになりたい人に向けて全力でサポートしてくれるスクールです。
スキルはもちろんその後の案件獲得のためにも注力してるスクールですので、フリーランスで絶対稼ぎたい人はおすすめです。
【2026年最新】破格すぎ!?ウェブフリの評判・口コミ・料金を徹底解説！メリット・デメリットや特徴も
ウェブフリの評判・口コミ・特徴が知りたい人に向けて現在話題沸騰中のプログラミングスクール「ウェブフリ」の評判を解説します。
2.インターネットアカデミー
- 各界の著名人や業界から認定されている権威あるスクール
- 自宅でも校舎でもOKな受講スタイル
- 交流会で同じ志を持った仲間が作れる
インターネット・アカデミー
は、著名人も認める25年以上続く信頼と実績のWebスクールです。
さらに自宅でも校舎でも学べるのが直接教えてもらいたいという需要も広くカバーしているスクールです。
【2022】インターネットアカデミーの評判・口コミを徹底解説！メリット・デメリットや特徴
インターネットアカデミーの評判・口コミ、特徴を解説します。
また、私以外にも、プログラミング講師のアサル先生が「DMMの無料カウンセリングを受けた感想」記事も、非常に参考になるのでチェックしてみてください！
【最新版】DMM WEBCAMPの無料カウンセリング受けた感想【勧誘なし】
DMM WEBCAMP（ウェブキャンプ）の無料カウンセリングの内容を紹介！無料カウンセリングの口コミや評判を体験談・感想を交えながら解説。DMM WEBCAMPはエンジニア転職に強いプログラミングスクールで、無料カウンセリング中に勧誘はなくキャリアカウンセラーが親身に相談に乗ってくれます！
まとめ：架空サイトは取っておくといい
以上、ポートフォリオに載せるべき架空サイトの作り方でした。
結論としては模写コーディングより架空サイトの方が未経験での就活時にアピールになります。
あと入社とか面接とは全く関係ないですが、架空サイトやポートフォリオは数年経ってもPCにだけでも残しておくといいですよ。
タイムカプセルのようになって成長を感じられたり、会社でできた仲間と見せ合ってお互い褒め合ったり、久しぶりに見て笑えたりしますので笑
笑えるということは成長したということですね。
頑張ってください＾＾
おすすめ：サーバー
ポートフォリオを作るならサーバーを契約しておきましょう。
私がこのブログで使ってるのはmixhostというサーバーです。
安定感があって問題が起きたことがなく安心して使えます。
普通何事もないでしょ？と思われるかもしれませんが、意外とサーバー会社によってはサーバーが停止したりあるんです。
顧客が使用してるサーバーが止まったりして数日間見れなくなったりということがありました。。
mixhostはあのブロガーでYouTuberのマナブさんも使ってます。
https://hoshi-log.com/mixhost/
MENTA
「教えたい人」と「学びたい人」のスキルプラットフォーム「MENTA」でメンターやってます。
今なら質問回数無制限です！
：高年収IT・Web業界トップクラスの求人数（4,000件）
