Web制作勉強方法

デザインカンプからのコーディング課題のオリジナルポートフォリオ化事例集【Web制作】

デザインカンプからのコーディング課題のオリジナルポートフォリオ化事例集【Web制作】
本ページにはプロモーションが含まれています。

この記事は、私が出している「デザインカンプからのコーディング練習課題」をオリジナルポートフォリオ化したものを掲載しているページになります。

2023年7月を持ってポートフォリオの被り問題を無くすべく、「オリジナルポートフォリオ化」まで無料で支援する教材になりました。

コーディング課題を見てみる

オリジナルポートフォリオコーディング課題
Web制作 コーディング課題 オリジナルポートフォリオ
オリジナル化での変更箇所
  1. 題材
  2. 画像
  3. テキスト
  4. ロゴ
  5. 配色
しょーご

オリジナルとは言っても元デザインが存在するので、半分オリジナルぐらいが正しいですが、サイトの印象がガラッと変わるものが多いです。

オリジナルポートフォリオ化支援に至った経緯などは、以下の記事にまとめています。

\変更点の詳細はこちら/

コーディング課題に関しては、以下の記事にまとめており、購入もこちらの記事のリンク先から行えます。

今後事例を増やしていきます。

オリジナルポートフォリオ化の注意点!

❶他人の実績を自分の実績に流用しないこと

信じられないかもしれませんが、他のスクールで、「他人の実績URLを自分のものとして利用して、就業先でバレて解雇される」というケースを観測しました。

あくまで「自分の実装の参考程度に」閲覧お願いします。

また、題材はお手本通りでなくていいので、多様なものが提出されるのを楽しみにしています。

❷現実に存在するブランドや題材は取り扱いに注意する

具体的な地名などをサイトに出していただくのは、作品のリアリティが増すので、大歓迎です。

ただ、ブランドの毀損に繋がるものは、架空のサイトでも避けていただけますと幸いです。

❸固有名称を出す際は、検索一覧を確認しておく

例えば、「沼津の鮮魚 木村商店」と命名したい場合に検索をして、似た名前が出てきた場合は避けておくのが無難です。

一応ベーシック認証やnoindexをかけてもらってるはずですが、念のため競合しないよう、名前が被らないようにお願いします。

中級課題2つ

農園サイト(蓼科ごとう農園を改変した事例)

デザインカンプからのコーディング課題 オリジナルポートフォリオ例

蓼科ごとう農園をオリジナルポートフォリオ化例を以下に載せます。一番提出が多い課題です。

kind訪問看護ステーション

オリジナルポートフォリオ 

元題材と全く違う分野だがいい感じにまとまっている

GAME-PL

戸野上高原牧場

北海道帯広市のミルクファーム | ミルクファーム北斗

長野県茅野市の農園 | 蓼科オーガニックファーム

ファーストビューが鮮やかで、ロゴの完成度がめちゃくちゃ高い、題材は元デザインと同じでも、全く違うように見せられる好例。

栃木県那須郡那須町のキャンプ場 | Ruruフォレスト那須

ロゴのクオリティが凄い

MAMA’S KITCHEN

MAMA'S KITCHEN

新潟県魚沼の米農家 | よねげんファーム

農産物の無駄をゼロに | NO MORE WASTE

このサイトはレベルが高かったです。スライドにも工夫がありますね。

日本一の漁港・銚子の魚市場 | 銚子はしもと市場

七海珈琲焙煎所トップページ

デザインカンプからのコーディング課題 オリジナルポートフォリオ

題材と雰囲気が素晴らしい、ロゴも最高

長野市中央区緑町の幼稚園 | 緑のようちえん

長野市中央区緑町の幼稚園 | 緑のようちえん
  • イラスト画像の挿入が秀逸で、セクション間の波線が柔らかさを出している

琥珀の森乗馬倶楽部

オリジナルポートフォリオ

「アクセス」の部分にオリジナル感があって良い、ロゴも素敵

こどもくに / ひかりの幼稚園

岡山県岡山市の老舗和菓子店 | 宗家 毛利庵

Web制作 オリジナルポートフォリオ

埼玉県さいたま市の植物園 | 彩の国ひだまり植物園

サービスサイト(ユアコーディングを改変した事例)

中級ユアコーディングを改変してオリジナルポートフォリオ化した例を下に記載します。

これも以外に多彩なデザインになり得ます。

動画編集代行サービス|Creative Channel

デザインカンプからのコーディング オリジナルポートフォリオ

元デザインと全く逆の、没入感のあるデザイン

さくらアカデミー

オリジナルポートフォリオ

はうすたーじゅ 家事の手間を最小に、家庭時間を大切にする助けに家事代行サービス

Unity Meet

Web制作 コーディング オリジナルポートフォリオ

Salon de Jiyu

グラデーションが鮮やかで画像ともマッチ

PC修理Faster

配色が素晴らしい

イラストのチョイスが題材とマッチしてる

ワンプレイス

オリジナルポートフォリオ

GAURA STUDIO

AIクリエイティブの作成サービスという個性的なテーマとデザイン

しらなみ水泳教室

  • ファーストビューとヘッダー間の波のボーダーがセンス良き

中級Ex課題2つ

採用サイト(Iggata Groupを改変した事例)

デザインカンプからのコーディング課題 オリジナルポートフォリオ例

Iggata Groupの採用サイトを改変し、オリジナルポートフォリオ化した例を下に記載します。

Onestop service法律事務所

デザインカンプからのコーディング オリジナルポートフォリオ

採用情報 | すみわたり動物病院

オリジナルポートフォリオ デザインカンプからのコーディング

eスポーツスクール | Future Game Lab

訪問看護ステーション 翠の街

つばき司法書士法人

デザインカンプからのコーディング オリジナルポートフォリオ

トラベルマスターアカデミー | 未来の旅行とホスピタリティの専門学校

オリジナルポートフォリオ

採用情報 | 株式会社EntaRing(エンタリング)

デザインカンプ コーディング課題のオリジナルポートフォリオ化事例集

力強く、印象に残るファーストビュー。
フォントと配色が挑戦していて素晴らしい

オンラインプログラミング学習サービス「シン・プログラミング塾 シニアクラス」

デザインカンプからのコーディング オリジナルポートフォリオ

レイアウトの工夫、ファーストビューのフォントも配色も素晴らしい

採用情報 | 株式会社Visionary Realms(ビジョナリー レムルズ)

オリジナルポートフォリオ

採用情報 | 株式会社紡建設グループ(つむぐけんせつグループ)

旅館サイト(石井課題を改変した例)

旅館サイト「石井花壇」を改変し、オリジナルポートフォリオ化した例を下に記載します。

和風サイトが作りやすいです。

風雅流苑 | 京都鴨川沿いの結婚式場【公式サイト】

ちゃんこ鍋体験 | 相撲魂 | 相撲を感じる旅【公式サイト】

日英両言語翻訳機能付き

さざんか花火大会【公式サイト】

富士の麓 | 富士山絶景旅館【公式サイト】

【千葉】グリーンヒルリゾート【公式サイト】

海鮮料理|仙山

オリジナルポートフォリオ

和菓子|花の香

うなぎの川田屋

とても美味しそう(^q^) 写真でサイトの印象は決まりますね。

黒澤木工 | 家具制作【公式サイト】

観光名所 – 袖ノ浦港夏祭り|袖ノ浦市観光委員会【公式サイト】

元サイトの面影も無い改変が素晴らしく、具体的な地名が出てくるとリアル感が増す好例

上級課題 Engress

TOEFL専門塾のEngressを改変してオリジナルポートフォリオ化した例を記載します。

FitWell – あなたの個々のニーズや目標を叶える フルコミット型パーソナルジム

Sunshine Soccer school

デザインカンプからのコーディング課題 オリジナルポートフォリオ

https://ben-test.site/
bentest
@test1009

結婚相談所HARMONY

デザインカンプからのコーディング課題 オリジナルポートフォリオ

RETRO CAR

ロゴが秀逸

FIT ZONE

Webplus | WebplusはWEBサイト構築を通じて 御社の課題を解決します。

オリジナルポートフォリオ

Arca nail デザインに特化したネイルサロン

オリジナルポートフォリオ デザインカンプからのコーディング課題

Elegance Cafe

https://uutanman.com/
test_elegance
test_elegance

AMUSIC – あなたの生活に音楽という娯楽をお届けします。

コーディング オリジナルポートフォリオ

配色がほぼ違和感なく素晴らしい作品

well-being 日々を愉しむ介護付きシニアレジデンス

オリジナルポートフォリオ コーディング web制作

LAST-LONG

noleggio

デザインカンプ コーディング課題のオリジナルポートフォリオ化事例集

ぴくちゃ | すぐに遊べる写真日記アプリ。その思い出、ぴくちゃしよっ。

オリジナルポートフォリオ

過去一で独創的なポートフォリオ。

Photoshop編 建築会社 園崎組

堅いビジネス系、士業などに向いているデザインです。Photoshop編の準備が必要な分、提出者が少なく、まだ半オリジナル化の事例が多くありません。

株式会社 清洲IoTエンジニアリング

オリジナルポートフォリオ

一部背景に動画が使われているのがユニーク

ESAKA RUNNING SCHOOL

REJUVANATE

デザインカンプからのコーディング課題 オリジナルポートフォリオ

CRAIN MATSUMOTO

オリジナルポートフォリオ

株式会社 BORCELLE

デザインカンプ コーディング課題のオリジナルポートフォリオ化事例集

株式会社 AclerLogistics

デザインカンプからのコーディング課題 オリジナルポートフォリオ

オリジナルポートフォリオレビューまで無償対応!!

デザインカンプからのコーディング練習課題」では、

  1. デザインカンプからのコーディングを行い、無料レビューを受ける
  2. オリジナルポートフォリオ化してもらい、無料レビューを受ける

この二段構えで、皆さんの「コーディング力とポートフォリオを両方充実させる」ものです。

今の所、オリジナルポートフォリオ化後のレビューも無料で行っています。

オリジナルポートフォリオ

まだ未購入で興味のある方がいれば、以下の販売ページを御覧ください。

あなたに是非読んでほしい記事です!