オリジナルポートフォリオ作品例・事例集【Web制作課題】
この記事は、私が出している「デザインカンプからのコーディング練習課題」をオリジナルポートフォリオ化したものを掲載しているページになります。
2023年7月を持ってポートフォリオの被り問題を無くすべく、「オリジナルポートフォリオ化」まで無料で支援する教材になりました。
オリジナルポートフォリオ化する課題は以下の通りですが、「全ての課題のオリジナルポートフォリオを添削」するので、必須じゃない課題をオリジナルポートフォリオにしても、無料添削します！！
- 題材
- 画像
- テキスト
- ロゴ
- 配色
オリジナルとは言っても元デザインが存在するので、半分オリジナルぐらいが正しいですが、サイトの印象がガラッと変わるものが多いです。
オリジナルポートフォリオ化支援に至った経緯などは、以下の記事にまとめています。
＼変更点の詳細はこちら／
コーディング課題に関しては、以下の記事にまとめており、購入もこちらの記事のリンク先から行えます。
事例の中には既にサイト公開を終えてしまわれた方もいます。ファーストビュー画像を添付しているので、あくまでアイデアのみを参考にしてもらえればと。
オリジナルポートフォリオ化の注意点！
❶他人の実績を自分の実績に流用しないこと
信じられないかもしれませんが、他のスクールで、「他人の実績URLを自分のものとして利用して、就業先でバレて解雇される」というケースを観測しました。
あくまで「自分の実装の参考程度に」閲覧お願いします。
また、題材はお手本通りでなくていいので、多様なものが提出されるのを楽しみにしています。
❷現実に存在するブランドや題材は取り扱いに注意する
具体的な地名などをサイトに出していただくのは、作品のリアリティが増すので、大歓迎です。
ただ、ブランドの毀損に繋がるものは、架空のサイトでも避けていただけますと幸いです。
❸固有名称を出す際は、検索一覧を確認しておく
例えば、「沼津の鮮魚 木村商店」と命名したい場合に検索をして、似た名前が出てきた場合は避けておくのが無難です。
一応ベーシック認証やnoindexをかけてもらってるはずですが、念のため競合しないよう、名前が被らないようにお願いします。
中級課題2つのオリジナルポートフォリオ化事例
農園サイト(蓼科ごとう農園を改変した事例)
蓼科ごとう農園をオリジナルポートフォリオ化例を以下に載せます。一番提出が多い課題です。
長野県松本市のパン屋さん | やさしいパン屋さん
https://hide-works.com/yasashii-bakery/
hide-works
hide-works
笑顔あふれる歯医者さん | さみだれ歯科医院
参考にしたい、お手本のようなオリジナルポートフォリオ
https://teraco.wpx.jp/demo03
demo
demo
kind訪問看護ステーション
元題材と全く違う分野だがいい感じにまとまっている
http://wp197924.wpx.jp/tyuukyuu/
tyuukyuu
tyuukyuu
GAME-PL
戸野上高原牧場
https://wp205599.wpx.jp/cyukyu-original/
practice-work
portfolio
北海道帯広市のミルクファーム | ミルクファーム北斗
http://wp885456.wpx.jp/cyukyu-org/
cyukyu02
cyukyu02
空中ＹＯＧＡ・ピラティス | LARANA
https://larana-yoga-studio.sarauta-webdesign.com
larana
larana
長野県茅野市の農園 | 蓼科オーガニックファーム
ファーストビューが鮮やかで、ロゴの完成度がめちゃくちゃ高い、題材は元デザインと同じでも、全く違うように見せられる好例。
https://wp191186.wpx.jp/chukyu/
tkd-h
tkd_test01
栃木県那須郡那須町のキャンプ場 | Ruruフォレスト那須
ロゴのクオリティが凄い
MAMA’S KITCHEN
https://eguegu.conohawing.com/mamas-kitchen/
ryo
ryo-5555
新潟県魚沼の米農家 | よねげんファーム
https://wp697557.wpx.jp/yonegen-farm/index.html
user-111
user-111
農産物の無駄をゼロに | NO MORE WASTE
このサイトはレベルが高かったです。スライドにも工夫がありますね。
https://act.okap-portfolio.com/no-more-waste/
pfmaking2023
pfokap
日本一の漁港・銚子の魚市場 | 銚子はしもと市場
https://wp521092.wpx.jp/uo-ichiba/
shogolog
uo-ichiba
七海珈琲焙煎所トップページ
題材と雰囲気が素晴らしい、ロゴも最高
https://riey-log.conohawing.com/NanamiCoffeeRoaster/
riey
test1111!
長野市中央区緑町の幼稚園 | 緑のようちえん
- イラスト画像の挿入が秀逸で、セクション間の波線が柔らかさを出している
https://www.aoidesign21.com/coding/midorino-youchien/
coding2024
coding2024
琥珀の森乗馬倶楽部
「アクセス」の部分にオリジナル感があって良い、ロゴも素敵
https://kumamaru.conohawing.com/portfolio/kohakuforest-rc/
user
open@sesami001
こどもくに / ひかりの幼稚園
https://oasis88.net/portfolio/work3/
yujoy
yutry123
岡山県岡山市の老舗和菓子店 | 宗家 毛利庵
https://inori3745.com/souke-mourian/
root
root5678
埼玉県さいたま市の植物園 | 彩の国ひだまり植物園
中級Ex課題2つのオリジナルポートフォリオ化事例
青牡丹工務店（オリジナルポートフォリオ化不要ですが、レビュー受け付けてます）
BrightSpeak English | どこからでも英語が話せるようになる
https://wp436308.wpx.jp/english-school/index.html
english-school
passw0rd
採用サイト(Iggata Groupを改変した事例)
Iggata Groupの採用サイトを改変し、オリジナルポートフォリオ化した例を下に記載します。
Onestop service法律事務所
https://mametan.sakura.ne.jp/onestopservice/index.html
han17711
han17711
採用情報 | すみわたり動物病院
eスポーツスクール | Future Game Lab
訪問看護ステーション 翠の街
つばき司法書士法人
https://eguegu.conohawing.com/tsubaki-group/index.html
ryo-5555
ryo-5555
トラベルマスターアカデミー | 未来の旅行とホスピタリティの専門学校
https://wp697557.wpx.jp/tmacademy/index.html
user-111
user-111
採用情報 | 株式会社EntaRing(エンタリング)
力強く、印象に残るファーストビュー。
フォントと配色が挑戦していて素晴らしい
https://risahonda.com/portfolio/intermediate-ex/index.html
kadai
PorT9FoLio
オンラインプログラミング学習サービス「シン・プログラミング塾 シニアクラス」
レイアウトの工夫、ファーストビューのフォントも配色も素晴らしい
https://wp191186.wpx.jp/chukyu-ex_change/index.html
tkd-h
tkd_test01
採用情報 | 株式会社Visionary Realms(ビジョナリー レムルズ)
採用情報 | 株式会社紡建設グループ(つむぐけんせつグループ)
https://wp824966.wpx.jp/tumugu-kensetu/index.html
tumugu-kensetu
tumugu-kensetu111
上級編TETOTEのオリジナルポートフォリオ化事例
TETOTEはオリジナルポートフォリオ化は任意です。しかし完走者はコーディングレベルの高い人が多いため、オリジナルポートフォリオもレベルが高くなっています。
BlueClass | 基礎から応用まで学べるオンライン講座
https://circle2025.stars.ne.jp/my-wordpress/
wordpress
wordpress
採用特設サイト | 青風クリニック
https://shiroyama-web.site/aokaze-clinic
demo0000
demo0000$
Photoshop編のオリジナルポートフォリオ化事例
堅いビジネス系、士業などに向いているデザインです。が、オリジナルポートフォリオでは様々な種類の作品を提出いただいています。
DA-TE | ファッショングラスの定額制サービス
https://wp755638.wpx.jp/da-te
da-te
da-te022
NEOS GYM | 理想のカラダへ導くトレーニングジム
https://nishi12.wpx.jp/neos-gym
nishi
nishi
玄鳴神社 | GENMEI SHRINE
KOHAN SAUNA
https://wp406314.wpx.jp/sauna/
eguchi
sauna
TOKYO AQUARIUM | 海の神秘を体験する旅へ
https://kanalogo.sakura.ne.jp/aqua/
basic
basic8888
WorkSphere – 自由な働き方、高機能な空間。
https://kumamaru.conohawing.com/portfolio/worksphere
open-user01
open-user01
株式会社 京点
https://wp331457.wpx.jp/photoshop_original
syake-114
syake-114
コドモラボ
フォント、画像選びなどが秀逸。
https://kenichi-nishii.com/_preview/2408_kodomolab
demo
tebheK-jyzgu4-fowvif
昴製薬株式会社
アニメーションスキルが高く参考にしたい作品
https://wp259801.wpx.jp/subaruseiyaku
pompom
abcd
ESAKA RUNNING SCHOOL
https://harunaweb.wpx.jp/run-school/
demo
demosite
CRAIN MATSUMOTO
https://k-kod.conohawing.com/Ps-code-portfolio/
k-kod.4530
kkkk-4530
株式会社 BORCELLE
https://chikisite.conohawing.com/BORCELLE/
user01
user01
株式会社 AclerLogistics
http://wp885456.wpx.jp/photo-org/
pho-02
pho-02
オリジナルポートフォリオレビューまで無償対応!!
「デザインカンプからのコーディング練習課題」では、
- デザインカンプからのコーディングを行い、無料レビューを受ける
- オリジナルポートフォリオ化してもらい、無料レビューを受ける
この二段構えで、皆さんの「コーディング力とポートフォリオを両方充実させる」ものです。
今の所、オリジナルポートフォリオ化後のレビューも無料で行っています。
まだ未購入で興味のある方がいれば、以下の販売ページを御覧ください。
