PR|3日で初案件

Webデザイン練習の架空サイト制作|ポートフォリオに使える7ステップ

◆ ◆ ◆

Homeフリーランスの仕事術 › Webデザイン練習の架空サイト...

FREELANCE CAREER GUIDE
フリーランスの仕事術
Webデザイン練習の架空サイト制作|ポートフォリオに使える7ステップ
フリ転。

架空サイト制作は、実案件がない段階でもポートフォリオに掲載できる作品を作る有効な方法です。テーマ選びからコーディング・公開まで一気通貫で行うと、採用担当者やクライアントに実務力を伝えやすくなります。この記事では、架空サイトを7ステップで完成させ、仕事獲得につながるポートフォリオを作るまでの流れを解説します。

目次

この記事でわかること

「業種×サイト種類」でテーマを5分で決める方法、デザインから公開まで一気通貫で完成させる3段階の実装フロー、実案件経験ゼロでも説明できる架空サイトの言語化ノウハウを紹介します。

今のデザインの仕事で、一番近い悩みは?

この記事の結論

架空サイト制作でポートフォリオを整えるには、「自由に作る」より「想定クライアントの課題を解決する」という視点で取り組むことが出発点です。テーマ・ターゲット・制作意図を言語化できる状態まで仕上げると、実案件経験がなくても説明可能な作品になります。手順を守ってデザインと実装を一通り完成させ、URL付きで公開できる状態にすることが、案件獲得に近づく最短の準備です。

最初に確認すること

架空サイトを作り始める前に、「誰のための・何のためのサイトか」を1文で書けるかを確認してください。この1文が書けない状態でデザインを始めると、完成しても説明できない作品になります。所要時間の目安は5分です。

状況別ショートカット

状況読むべきセクション所要時間
何を作ればよいか決まっていない架空サイトのテーマは業種と目的で決まる約5分
テーマは決まったが構成で迷っている架空サイトの構成は実務で使う5要素で組む約8分
デザインまで完成したが実装で止まっている実装から公開まで3段階で完結させる約7分
完成したがポートフォリオへの載せ方がわからない架空サイトをポートフォリオで説明できる形にする約6分

架空サイトのテーマは業種と目的で決まる

テーマ選びで詰まる原因の多くは、「自分が好きなもの」から探そうとするためです。実務を想定するなら、想定クライアントの業種から逆算すると判断しやすくなります。

想定クライアントの業種から選ぶ理由

フリーランスWebデザイナーとして仕事を取りにいく場合、受注しやすい業種から練習テーマを決めると練習と営業の方向が一致します。飲食店、サロン・エステ、士業(税理士・行政書士)、EC系ショップ、採用サイトなどは、クラウドソーシング上でも発注件数が多い業種です。自分がどの業種のクライアントを担当したいかをまず絞ると、テーマ決めの選択肢が自然に狭まります。

「どの業種でもよい」という状態で考え始めると、選択肢が広すぎて1時間経っても決まらないことがあります。最初に「飲食か、サロンか、採用か」という3択程度まで絞ってから決める方が、実際には作業が早く進みます。

LP・コーポレートサイト・採用サイトで目的を分ける

業種を絞ったあとは、制作するサイトの種類を決めます。LP(ランディングページ)、コーポレートサイト、採用サイト、店舗サイトでは、デザインの構成・訴求の優先順位が異なります。練習として1本作るなら、LPが構成の緊密さと説明のしやすさを両立しやすい形式です。コーポレートサイトは情報量が多くなるため、練習の2本目以降で取り組む方が負荷が分散します。

架空サイトのテーマは、業種と目的の組み合わせで決まります。「地方の整骨院向けLP」「20〜30代女性向けネイルサロンのコーポレートサイト」のように、業種・ターゲット層・サイト種類の3点をセットにすると、設計段階での判断がしやすくなります。

fakeclientsで架空案件の条件を参照する

テーマは決まったが「どんな要件で作るか」が曖昧な場合は、fakeclients.com(Webデザインのブリーフ練習用素材)を参照してください。架空の依頼文(ブリーフ)が多数掲載されており、制約条件付きの練習が実務感のある練習になる理由を体感できます(架空案件例・フリーランス向け解説)。クラウドソーシング上の実際の案件文を条件として参照する方法も有効です。特定の発注者の固有情報を転用することは避けてください。

CHECK

▶ 今すぐやること: 想定クライアントの業種とサイト種類を各1つ決め、「〇〇向けLPを作る」という1文を書く(5分)

Q: どの業種のテーマを選べば評価されやすいですか?

A: 特定の業種が有利というより、「なぜこの業種を選んだか」を説明できるかどうかの方が評価に影響します。自分が担当したいと思える業種を選ぶ方が、制作意図の説明が具体的になります。

Q: テーマを1つに絞れない場合はどうしますか?

A: まず「LP形式のサイト1本」に限定して考えてください。コーポレートサイトや複数ページ構成は2本目以降に取り組む方が、制作時間の見通しが立ちやすくなります。

架空サイトの構成は実務で使う5要素で組む

テーマが決まったあと、いきなりデザインツールを開いて何から手をつければよいか迷う場面は珍しくありません。構成を先に決めないまま制作に入ると、要素が散らばって全体の意図が伝わりにくい仕上がりになります。

ターゲットとペルソナを先に文字で書く

架空サイトでも、ターゲットとペルソナを先に言語化することが実務に近い練習になります(架空サイトの作り方手順)。年齢・性別・職業・サービスを探している理由を文章で1〜2段落書いてみると、デザインの方向性が決まりやすくなります。

「30代女性、産後のリハビリ目的で整骨院を探している、近所で週1〜2回通いやすい場所を重視している」という形で具体化するだけで、ファーストビューに何を置くか、信頼要素に何を使うかが決まってきます。ペルソナ設定の6フェーズを参考に、年齢・悩み・行動パターンを整理すると、架空サイトでも実務レベルの設計が可能です。ペルソナが曖昧なままだと、デザイン中に「この要素は入れるべきか」の判断ができず、作業が止まります。

ファーストビュー・CTA・信頼要素・導線の4点を構成の柱にする

LP・コーポレートサイトを問わず、実務で繰り返し使う構成要素はファーストビュー、CTA(行動を促すボタンや問い合わせ誘導)、信頼要素(実績・口コミ・資格)、導線設計の4点です。架空サイトの構成を作る段階では、この4点がどこに・どの順番で配置されるかをワイヤーフレームで確認してから、デザインに移ります。

ワイヤーフレームはFigmaの無料プランで作成できます。ツールに慣れていない段階であれば、紙に手書きしたもので十分機能します。完成度より「要素の配置と順番が決まっている」状態を先に作ることが目的です。

参考サイトは3〜5件に絞って要素を分解する

参考サイトを調べ始めると、ブックマークが増え続けて「参考にならない参考」が積み上がることがあります。3〜5件に上限を設けて、各サイトのレイアウト・配色・ファーストビューの構成・CTAの位置を表に整理するだけで分析は十分です(架空サイト制作の簡易フロー)。参考にしてよいのはあくまで「構成の考え方」と「デザインの方向性」であり、配色やコピーをそのまま転用することは避けてください。

架空サイト制作の前に模写で基礎を固める

架空サイトを作る段階でデザインの基礎がないと、構成を決めても手が動かない状態になります。模写を先に行うことで、レイアウトの感覚とツールの操作に慣れてから架空サイトに入ることができます(模写から架空サイト制作への学習フロー)。

模写は「1ページを完成させる」を目標にする

模写の目的はオリジナリティではなく、既存のデザインを再現する過程で配置・余白・フォントサイズの感覚を身につけることです。1ページ全体を再現する模写を1〜3本完成させると、架空サイトのデザイン段階でツールの操作に詰まる回数が減ります。「模写が完璧になってから架空サイトへ」と考えると移行のタイミングを見失いやすいため、模写1本が完成したら架空サイトの構成作りを並行して始めてください。

制約条件を付けて模写の難易度を上げる

ある程度模写に慣れてきたら、「スマホ版のレイアウトも再現する」「Figmaで作ったデザインをそのままHTML/CSSで実装する」という制約を加えると練習の効果が上がります(模写から架空サイト制作への学習フロー)。自由度を絞ることで、実務で発生する「デザインどおりに実装する」という課題に近い練習ができます。制約なしで自由に作る練習は達成感は得られますが、実務での対応力とは別の方向のスキルが伸びる点に注意が必要です。

自分のスキル段階を3分で判定する

架空サイトに取りかかる前に、現在地を確認してください。

Q1: Figma等のデザインツールで簡単なレイアウトを作れますか?

Yesの場合はQ2へ。Noの場合は模写から始めてください(模写1本完成後に戻る)。

Q2: HTML/CSSで1カラムのページを実装できますか?

Yesの場合はQ3へ。Noの場合は架空サイトはデザインカンプ(Figmaで完成)のみ先行して作成し、実装は後から追加で構いません。

Q3: レスポンシブ対応の経験がありますか?

Yesの場合はResult Aへ。Noの場合はResult Bへ。

Result A: 架空サイトを実装・公開まで一気通貫で進めてください(このステップが評価につながります)

Result B: スマホ表示を追加することを次の架空サイトの課題として設定してください

CHECK

▶ 今すぐやること: 上記の3問に回答し、現在の制作ステップ(模写・カンプ作成・実装・公開のどれから始めるか)を決める(3分)

Q: 模写はどのサイトで練習すればよいですか?

A: 余白設計がわかりやすく構成がシンプルな国内の中小企業サイトやランディングページが練習しやすい対象です。PinterestやBehanceで「LP デザイン」「シンプル コーポレートサイト」と検索すると参考例を見つけやすくなります。

Q: 模写と架空サイト制作は、どのくらいの時間で切り替えるべきですか?

A: 模写を2〜3本完成させた時点で架空サイトの構成作りを開始するのが現実的です。完璧を待ってから移行するより、並行して進めることでそれぞれの学びが補い合います。

デザインの仕事で単価を上げたい方へ

Webデザインの学び方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

実装から公開まで3段階で完結させる

デザインカンプを完成させたところで止まっているケースは、初心者に多いパターンです。クライアントが架空サイトの評価で重視するのは「デザインの見た目」だけでなく、「実際に動いているかどうか」も含まれます。URL付きで公開された状態のものが提示できると、ポートフォリオとしての説得力が変わります。

HTML/CSSでコーディングするか、ノーコードツールを選ぶか

制作手段として、HTML/CSS、STUDIO、WordPressの3つを比較します。

手段向いているケース実装難易度ポートフォリオとしての強み
HTML/CSSコーディング力を見せたい場合中〜高実装力のアピールに直結
STUDIOデザイン特化で実装時間を短縮したい場合デザインの質を優先できる
WordPressCMSの知識も合わせて示したい場合実務案件への対応幅が広がる

「自分が獲得したい案件の種類」に近い手段を選ぶことが判断基準です。HTML/CSSをゴリゴリ書けることをアピールしたいなら手書きコーディングを選び、デザインの質を優先したい場合はSTUDIOから始める選択もあります。

STUDIOで架空サイトを継続的に制作しながら学習を習慣化している事例もあります。毎週1本完成させることを目標に取り組んだWebデザイナーが「STUDIOで架空サイトを継続的に制作し、週1本完成を習慣化した」と語っています(Webデザイン学習 with STUDIO・架空サイト継続)。

jQueryやアニメーションの追加で実務感を出す

HTML/CSSで実装を終えたあと、スクロールに連動したアニメーションや、スライダー表示などのインタラクションをjQueryで追加すると実務感が出ます。テーマ決め・参考サイト確認・構成決定・HTML/CSS・jQuery追加・公開まで一気通貫で進めたWebデザイナーが「HTML/CSSでコーディングしてjQueryも追加し、最終的に公開まで行った」と振り返っています(初めて架空のWebサイトを制作してみた)。

jQuery自体の学習コストは低くはないため、いきなり複雑な実装から始める必要はありません。「フェードイン表示」「ハンバーガーメニューの開閉」程度のアニメーションから加えて、徐々に範囲を広げる方が完成まで到達しやすくなります。

GitHub PagesかNetlifyで公開してURLを取得する

費用をかけずにURLを取得するにはGitHub PagesまたはNetlifyを使えます。どちらも無料プランで静的サイト(HTML/CSSで作ったサイト)を公開できます。STUDIOの場合は無料プランでの公開も可能ですが、独自ドメインの設定は有料プランが必要です。URL付きのサイトをポートフォリオに掲載することで、閲覧者がすぐに動作確認できる状態を作れます。

Q: ノーコードで作った架空サイトはポートフォリオとして評価されますか?

A: STUDIOやWixで作った架空サイトも、デザインの質と構成の意図が説明できれば評価されます。「なぜこのツールを選んだか」を一言添えると、ツール選択の判断力も伝わります。

Q: jQueryの知識がない場合、アニメーションは省略してよいですか?

A: 省略して構いません。動きがない状態でも、デザインの完成度と構成の説明が整っていればポートフォリオとして機能します。アニメーションは加点要素として、後から追加する判断で問題ありません。

架空サイトをポートフォリオで説明できる形にする

実案件の実績がない段階でも、架空サイトは制作の意図と過程を説明できる状態であれば、クライアントへの提示に耐えられる作品になります。

制作背景・ターゲット・デザイン意図の3点を言語化する

架空サイトをポートフォリオに載せる際、「なぜそのデザインにしたか」を言語化することがケーススタディとして機能します(フリーランスWebデザイナーのロードマップ)。

言語化すべき3点は次のとおりです。制作背景(どんな想定クライアントのためにどんな課題を解決しようとしたか)、ターゲット(誰に届けるサイトか)、デザイン意図(配色・フォント・レイアウトの選択理由)。この3点がサイトと一緒に説明できれば、「架空サイトなのに実績として使えるか?」という疑問に対して、自分の言葉で答えられる状態になります。

「想定クライアントのためのサイト」という視点で設計すると、架空でも実務に近い制作になると気づいたWebデザイナーが「クライアント視点でサイトを設計することで、架空でも実務に近い制作になると気づいた」と語っています(Webデザイン初心者がポートフォリオに載せるべき架空サイトの考え方)。

架空サイトの連絡先や情報の扱い方に注意する

架空サイトをポートフォリオとして公開する場合、架空の店名・住所・電話番号が実在の情報と一致してしまうリスクがあります。連絡先の扱いには注意が必要です(Webデザインスクール生「架空のサイト」をポートフォリオに)。

対策として、電話番号はダミーの形式(000-000-0000)を使用し、住所は「〇〇市〇〇区(架空)」と明記する、連絡フォームは非機能の状態にするか省略する、といった処理が一般的です。「架空サイトのため連絡先は非機能です」という注記をサイト内に入れると、ポートフォリオ閲覧者に誤解を与えません。

3〜5点の作品を揃えて得意なテイストを見せる

ポートフォリオに揃える作品の点数は、3〜5点程度の質の高い作品として整えることが実務上推奨されています(フリーランスWebデザイナーのロードマップ)。量を増やすより、各作品に制作意図の説明を付けた状態にする方が評価につながりやすくなります。異なる業種・テイスト・サイト種類を組み合わせると、対応幅が伝わりやすくなります。

フリーランスのポートフォリオ全体の作り方では、7項目の構成と案件獲得につながる実績の見せ方が詳しく解説されています。架空サイトをポートフォリオに載せる際は、「課題→対応→成果」の3点セットで各作品を整理することで、閲覧者が依頼後のイメージを持ちやすくなります。

ポートフォリオ全体にどの業種・テイストに強いかが伝わる構成になっていれば、「このデザイナーに頼むとどんな仕上がりになるか」をクライアントがイメージしやすくなります。

Q: 架空サイトをポートフォリオに掲載するとき、「架空」と明記すべきですか?

A: 架空サイトであることを明記した方が誠実な印象になります。「練習制作」「自主制作」と一言添える形で問題なく、架空であること自体が評価を下げる要因にはなりません。制作意図と完成度の方が評価に影響します。

Q: ポートフォリオサイト自体も自作した方がよいですか?

A: ポートフォリオサイトを自作することで、デザインと実装の両方を見せられる機会になります。ただし、ポートフォリオサイト制作に時間をかけすぎて作品数が増えない状態になるより、まず架空サイト3点を揃えることを優先してください。

架空サイトを実務力向上につなげる5つの工夫

練習が実務力向上につながるかどうかは、制作の取り組み方で変わります。以下の5つの工夫を取り入れると、架空サイトの練習密度が上がります。

工夫1: クラウドソーシングの案件文を条件にして制作する

制約のある条件下で作る練習の方が実務力向上につながります(模写から架空サイト制作への学習フロー)。クラウドソーシングサイト(ランサーズ等)で実際の案件文を参照し、予算・スケジュール・要件を自分の架空案件の条件として設定することで、実案件と同等の制約を作り出せます(ランサーズ ポートフォリオ事例)。

「クライアントの指定した条件内で完成させる」という制約付きの練習が、実務での対応幅を広げます。特定の発注者の固有情報を転用することは避け、条件設定の参考として使ってください。

【対象】: 架空サイトを作っているが「練習が自己満足になっている」と感じているWebデザイナー

【手順】: ランサーズやクラウドワークスで「Webデザイン 案件文」を検索し、5件程度の依頼文を読んでください(10分)。次に、業種・予算・希望スタイル・納期の4点を抜き出して自分の架空案件の要件書として書き出します(10分)。その要件書に従って制作を進め、完成後に「要件をどう解釈したか」を1段落で記録します(完成後10分)。

【コツと理由】: 「要件に応えるデザインを選ぶ」というプロセスが実務力の核心です。制約を自分で設けることで、実案件と同じ思考プロセスを練習できます。

【注意点】: 案件文をそのまま「実績」として掲載することは避けてください。あくまで条件の参考として使い、制作物は架空サイトとして扱います。条件が自分のスキルを大幅に超える場合は条件を一部調整して進める方が完成まで到達しやすくなります。

工夫2: レスポンシブ設計を全作品に入れる

PCデザインだけで終わらず、スマホ表示を前提にしたレスポンシブ設計で練習してください。実務案件のほぼすべてでスマホ対応が求められるため、ポートフォリオ作品で対応実績を示せると評価の幅が広がります。

「スマホファーストで設計してPCに拡張する」アプローチも広く使われます。スマホファーストで設計すると、要素の優先順位付けが強制されるため、構成の判断力が鍛えられます。

【対象】: デスクトップ表示のみの架空サイトをこれまで作ってきたWebデザイナー

【手順】: Figmaでスマホサイズ(幅375px)のフレームを先に作成し、ファーストビューとCTAを配置します(30分)。スマホデザインが完成したあとに、PC用フレーム(幅1440px)を追加して要素を展開します(30分)。HTML/CSSでコーディングする際、@mediaクエリでPC表示用のスタイルを上書きする形で実装します(コーディング全体の中に組み込む)。

【コツと理由】: 「PCから作ってスマホに縮める」アプローチを取ると、PC用に設計した要素がスマホで収まらず、後から崩れを修正する作業が増えます。スマホ先行で設計すると、必要な要素だけを厳選する判断が先に固まるため、PC版への展開がスムーズになります。

【注意点】: スマホ対応の実装でよくある問題が、font-sizeの指定をpx固定にして文字サイズが画面によって崩れることです。remvwなどの相対単位に慣れておくと、複数のデバイス幅での崩れが減ります。スマホ(375px)とPC(1024px以上)の2点だけ対応すれば、架空サイトの練習としては十分です。

工夫3: デザイン意図をドキュメントに残す

制作後にデザインの選択理由を言語化してドキュメントに残してください。この工程を省くと、後からポートフォリオで説明を求められたときに「なんとなく選んだ」という状態になります。

架空案件でも「目的」「ターゲット」「課題」を明記して説明可能にするアプローチが実務力向上につながります(フリーランスWebデザイナーのロードマップ)。実務では「なぜそのデザインにしたか」を口頭やドキュメントで説明するプロセスが繰り返し求められます。

【対象】: 架空サイトは完成させているが、説明できないと感じているWebデザイナー

【手順】: 制作完了後、A4用紙1枚(またはNotionやGoogleドキュメント1ページ)に制作背景・ターゲット・デザイン意図の3点を書きます(15〜20分)。「この色を選んだ理由」「このレイアウトにした根拠」を少なくとも2点書き出します(10分)。そのドキュメントをポートフォリオサイトの作品説明として掲載します(掲載のみ・追加作業なし)。

【コツと理由】: 「うまく説明できない」と感じたまま時間を置くと、制作の記憶が薄れてさらに書けなくなります。完成直後の15〜20分で書き切ることが習慣化の鍵です。

【注意点】: ドキュメントの完成度を上げることに時間をかけすぎると、次の作品制作が遅れます。制作背景・ターゲット・デザイン意図の3点が書ければ十分で、文章として整えることにこだわる必要はありません。デザインの全要素に理由を付けようとせず、「特に聞かれそうな選択」に絞って2〜3点書けば十分機能します。

工夫4: 制作物の完成基準を事前に決める

架空サイトを作り始めても「どこで完成にするか」が決まっていないと、細部の修正を続けて完成まで到達しない状態になります。「完成しないまま次のサイトを作り始めた」という経験を持つ人は珍しくありません。

完成基準を「公開してURLが取得できた状態」と事前に定めて、それ以外の修正は次の作品での課題に回す方が、作品数が増えるペースが上がります。

【対象】: 架空サイトを途中で止めてしまい、完成品が手元にないWebデザイナー

【手順】: 制作開始前に「完成の定義」を3点書きます(例: URLを取得している、スマホとPCで崩れがない、ポートフォリオに掲載できる状態)(5分)。制作中に「この修正は完成基準に含まれるか?」を判断し、含まれない場合は「次作の課題リスト」に書き出して保留にします(制作中に随時)。完成基準の3点を満たした時点で公開し、次の課題リストを次作のスタートに使います(制作終了時点)。

【コツと理由】: 「完成基準を決めて積み残しを次回に回す」アプローチの方が、結果的に1年間の作品数が増えます。完成を出し続けることで、自分の成長が目に見えやすくなります。

【注意点】: 完成基準を高く設定しすぎると結局完成しないため、最初の作品は「URLが取得できた状態」という最低ラインで設定してください。完成後に細部のデザイン修正を続けることは不要です。修正したい点は次作の課題リストに移して、今回の作品は完成として扱ってください。

工夫5: 架空のランサーズ・ポートフォリオ事例を分析する

ランサーズのポートフォリオ事例(架空サイト)デザインカンプ事例を参照すると、実際に仕事を受注しているWebデザイナーがどんな架空サイトをポートフォリオに掲載しているかを確認できます。デザインの優劣より「制作意図の説明がついているか」「業種のバリエーションがあるか」を見ると、参考にしやすくなります。

「自分と近いスキル段階のデザイナーがどう見せているか」を参考にする方が、改善点の特定がしやすくなります。

【対象】: ポートフォリオに何を載せるか・どう見せるかで迷っているWebデザイナー

【手順】: ランサーズの架空サイト・デザインカンプ事例ページで5〜10点の作品を閲覧します(10〜15分)。「受注実績のある作品に共通していること」を3点書き出します(10分)。自分のポートフォリオに不足している要素を1点特定し、次の架空サイト制作のテーマに反映します(5分)。

【コツと理由】: 「どの作品が良いか」の鑑賞で終わらせず、「自分のポートフォリオに何が足りないか」を1点特定して次の制作に反映することで、練習が方向性を持ちます。比較に5〜10点を見て共通点を3つ見つけたら、それで十分です。

【注意点】: 他のデザイナーの作品を模倣することは避けてください。「構成の考え方」と「見せ方の工夫」を参考にする範囲に留めます。掲載されているすべての作品を分析しようとすることは不要です。

架空サイトは意図を言語化すれば実績になる

架空サイト制作でポートフォリオを整えるには、「自由に作る」より「想定クライアントの課題を解決する」という視点で取り組むことが出発点です。テーマ・ターゲット・制作意図の3点を言語化できる状態まで仕上げることで、実案件経験がなくても説明可能な作品になります。デザインから実装・公開までの一気通貫を少なくとも1本完成させ、URL付きでポートフォリオに掲載できる状態を作ることが、案件獲得に近づく現実的な準備です。

架空サイトを何本作っても実務力が上がらない感覚が出てきたとしたら、制作の取り組み方を見直すタイミングです。制約条件を付ける、言語化する、完成基準を決める、という3つの工夫を取り入れると、同じ時間でも練習の密度が変わります。量より質の高い3〜5点を揃えることを目標に、1本ずつ完成させてください。

状況次の一歩所要時間
テーマが決まっていない業種とサイト種類を1つずつ選んで「〇〇向けLP」と書く5分
デザインカンプで止まっているGitHub PagesかNetlifyで公開して手持ちのURLを1件作る30〜60分
完成品があるが説明できない制作背景・ターゲット・デザイン意図の3点をドキュメントに書く20分
次に何を作るか決まらないランサーズの架空サイト事例を5点見てテーマ候補を出す15分

Webデザイン練習の架空サイトに関するよくある質問

Q: 架空サイトだけでフリーランスとして案件を獲得できますか?

A: 架空サイトのみのポートフォリオで案件を獲得したケースはあります。架空サイトの完成度と制作意図の説明が明確であることが条件です。クラウドソーシングで小さな実案件を並行して受注し、実績を積み重ねていく方が現実的な案件獲得の流れです(フリーランス向けに架空案件例を提示)。

Q: 架空サイトの制作にかかる時間の目安はどのくらいですか?

A: LP1本の場合、テーマ決め・構成・デザインカンプ作成・HTML/CSS実装・公開まで合計で40〜80時間程度が目安です。初めての場合はこれより長くなることが多く、2本目以降は短縮されていく傾向があります。

Q: Figmaは必須ですか?他のツールでも練習できますか?

A: Figmaは必須ではありません。Adobe XDCanvaでデザインカンプを作ることも可能です。Figmaは無料プランで複数ページのデザインが作成でき、ポートフォリオでの共有も容易なため、新しく選ぶなら使いやすい選択肢の1つです(Figma公式サイト)。

【出典・参照元】

初めて架空のWebサイトを制作してみた

Webデザイン初心者がポートフォリオに載せるべき架空サイトの考え方

Webデザイン学習 with STUDIO・架空サイトを継続

Webデザインスクール生「架空のサイト」をポートフォリオに

架空サイトの作り方手順

模写から架空サイト制作への学習フロー

架空サイト制作の簡易フロー

フリーランスWebデザイナーのロードマップ

フリーランス向けに架空案件例を提示

ランサーズ ポートフォリオ事例(架空サイト)

ランサーズ デザインカンプ事例

Webデザインのブリーフ練習用素材(fakeclients.com)

GitHub Pages

Netlify

Figma公式サイト

デザインの仕事で単価を上げたい方へ

Webデザインの学び方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑