パブリッシャー個人ポートフォリオのホームページ作成完全ガイド（PDF）

個人ポートフォリオホームページコンテンツ構成とUI/UXデザインは
応募者の立場ではなく、応募者を選ぶ人事担当者の立場で製作されなければなりません。

こんにちは。コーディングワークスです。

ウェブサイトの公開作業というのは難しいです。その中で個人ポートフォリオホームページというのが作る最も難しいと思います。たとえば、ショッピングモールを作成すると、ショッピングモールの一般的な種類があります。そして参考にするウェブサイトがガレージであふれます。だから経験のないパブリッシャー志願者でも難しくないようにアイデアを得てUI/UXデザインをします。やはり結果物もほとんど悪くないように出てきます。しかし、個人ポートフォリオのホームページは決まったものはありません。それだけでなく、参考にするウェブサイトもほとんどありません。それで、何をどこでどのように始めるべきかわかりません。さらに、よく作った個人ポートフォリオホームページ制作基準もあいまいです。だから作るのは難しいと思います。

国費パブリッシング過程は5ヶ月程度行われます。最初の2週間は、グラフィックツールを学び、残りの4ヶ月半をパブリッシング学習とポートフォリオを作成する時間として過ごすのが一般的です。講師ごとに異なる部分がありますが、ほとんどそうです。私の経験上、4ヶ月半という期間で最も授業するのが難しく、言葉もたくさんしなければならず、準備もたくさんしなければならない授業がまさにコース終了の3週間です。コーディングワークスは、コース終了の3週間前に個人ポートフォリオホームページの制作を開始し、コース終了前に完成させます。それで、生徒がいわゆるトム（Term）なしでインタビューし、早く就職できるようにコースをタイトに進めます。

上記でも述べたように、決まったことがない個人ポートフォリオホームページの制作は授業が本当に難しいです。個人ごとに好みが異なり、実力の違いもあるので、1～2種類を講師が決めてこうしてくださいと言えません。個人ポートフォリオホームページの基本的な枠組みと目的性を学生に認識させ、学生たち自身で作っていくように指導するのは難しいです。もちろん、学生も簡単な制作プロセスではありません。しかし、経験者の助けを3週間持続してもらいながら作るので、まともな結果をほとんど作り出します。

独学でパブリッシャー就職を準備する人または国費パブリッシング過程を修了したが、期間に個人ポートフォリオホームページの制作ができなかった人の立場で個人ポートフォリオホームページを一人で作成するしかありません。とても難しいことです。経験者の助けを3週間持続してもらって作っても難しいです。ところが、これを一人で何のガイドもなく作るというのは、本当に難しいことです。もちろん作るのが難しいというわけではありません。誰が見ても大丈夫な個人ポートフォリオホームページを作ることは難しいということです。そこでコーディングワークスが国費パブリッシング過程3週間進行する個人ポートフォリオホームページ制作授業内容のすべてを該当PDF教材に盛り込んでいます。

個人ポートフォリオホームページ制作は、一定のパブリッシングスキルがあれば誰でも作ることができます。しかし、ほとんどの目的性を失った結果を作って見せて、とても嬉しく思います。しかし、面接連絡は来ません。面接連絡が来ても、勤務条件や年俸で主導権を握ることはできません。よく作られた個人ポートフォリオのホームページは、単に就職を目的とするものではなく、インタビューで堂々とそして良い労働条件で働くことができるパブリッシャー志願者の最も重要な仕様になります。

今回製作された「個人ポートフォリオホームページ制作完璧ガイドPDF教材」に国費パブリッシング過程最後の3週間のように多くのノウハウとヒントをお伝えします。特に志願者を選ぶ人事担当者の立場で製作されなければならないという目的性に忠実な内容で構成されました。 <個人ポートフォリオホームページ制作完璧ガイドPDF教材>を通じてパブリッシャー志願者自ら本当にまともな個人ポートフォリオホームページ制作ができると信じています。

• 個人ポートフォリオホームページ制作コンセプトと制作順を理解
• 個人ポートフォリオホームページのセクション構成を理解する
• 実務で不可欠なフォルダ構造/絶対アドレス対相対アドレスの概念を理解する
• 体系的なパブリッシングのための機能定義書+HTMLワイヤフレーム詳細な書き方
• レスポンシブウェブ制作の必須理論とノウハウ
• 誰でも起動できるコーディングワークス推奨UI/UXプロトタイプウェブサイト制作説明
• セクション別実戦パブリッシング（iframe、フォントアイコン、レイアウト、詳細CSS）について
• 最後のステップであるプライベートポートフォリオホームページWebホスティングを理解する
• モバイルWebパブリッシング制作の必須理論とノウハウ

Q.選手知識、準備事項が必要ですか？

パブリッシャー就職のために今学んでいる方には合いません。この講義はある程度パブリッシング理論学習になり、パブリッシャー就職のために個人ポートフォリオホームページを準備する必要性を感じる段階の受講生の方に適しています。もちろん始めた方も結局はパブリッシャー就職のためにまともな個人ポートフォリオホームページの制作が必要です。そのPDFセクションのうち、「個人ポートフォリオホームページパブリッシングワークピースの作成ロードマップ」セクションでは、パブリッシングポートフォリオをどのように準備して作成するかについて詳しく説明します。プレビューを見ると、将来の学習と終了時にパブリッシングの成果物をどのように準備するかがわかります。

Q.どんな人にこの本が必要ですか？

新入パブリッシャーの応募者として、まともな個人ポートフォリオホームページの制作が必要な方、Webデザイナーまたはグラフィックデザイナーなのですが、パブリッシャーに転職のためにまともな個人ポートフォリオホームページ必要な方に最も必要な講義だと思います。特に、独学でパブリッシャー就職を準備される方、国費パブリッシング過程を通ったが、まともなパブリッシャー就職個人ポートフォリオホームページを作ることができず、卒業された方が該当します。

Q.ページ数と内容はどうなりますか？

全ページは221ページで構成されており、すべての内容はコーディングワークスが100%自己製作しました。インターネットにある資料を広げて加工したものも全くありません。コーディング画面、文字一つ一つ、キャプチャ画面ともにコーディングワークス独自のソースで純粋に製作しました。特に、最近のコーディングワークス国費パブリッシングコースの学生の中で、まともな個人ポートフォリオホームページの事例を詳細に分析し、具体的な方向を提示する内容で構成されています。特にPDF教材で説明する実習内容をファイル完成本を受講生ダウンロードセクションですべてダウンロード頂けます。

インターネット上の一般的な誰もができる内容ではなく、コーディングワークスの長年のノウハウが忠実に込められた価値ある資料だと自信を持っています。

Q.差別化される重要なコンテンツは何ですか？

ほとんど差別化されるコンテンツですが、特にパブリッシングのスキルを高め、まともなパブリッシャー就職個人ポートフォリオホームページ制作に不可欠な機能定義書+HTMLワイヤフレーム構造の制作について詳しく説明します。そして、すべてのセクションを作成する本番セクションの作成でHTML + CSS + JSコードのコアコードレビューを行います。実戦セクション制作完成本も受講生ダウンロードセクションから全てダウンロードできるように用意されています。

国費パブリッシング過程 3週間個人ポートフォリオホームページ制作時に学生に知らせるWeb用語、制作ノウハウ、実務制作コツ、ファイル管理、フォルダ管理、サムネイルイメージ制作などすごく言葉をたくさんするのにこのような部分が該当PDF教材に含まれています。

Q.ダウンロード後のアップデートはありますか？

電子書籍の性質上、頻繁な更新はほとんどありません。しかし、パブリッシャー就職ガイドとして知っておくべきことがある場合は、PDFファイルが修正されてアップロードされ、すぐに新しいニュースで受講生に通知します。

Q. コーディングワークス講義のうち<面接と就職を呼ぶ'パブリッシャー個人ポートフォリオホームページ'制作>映像講義とどう違いますか？

全体的な講義の目的と内容は似ています。 2つの講義ともにまともなパブリッシャー就職 個人ポートフォリオホームページを制作してパブリッシャー就職を早く良い条件にすることが目標に製作された同じケンテンツです。どちらもコーディングワークスが心から作った講義ですが、違いは以下の通りです。

映像講義は特性上直感的に理解でき、映像学習しながら自然に結果物が完成するというメリットはありますが、受講生が自分で考えて解決していき、創造的に自分だけの個人ポートフォリオホームページを作る内空を作るのに制約があります。

一方、PDF講義はコーディングワークスがじっくりとこの本を書いて映像講義で込められなかった目覚めのような参考内容、ノウハウ、ヒントをより詳細に込めました。例えば映像講義で機能定義書+HTMLワイヤフレーム構造の詳細な製作方法、レスポンシブウェブ制作必須理論とノウハウ、モバイルWebパブリッシング制作必須理論とノウハウについて詳しく説明することは難しかったが、PDF講義ではこのような部分を複数ページをを通して詳細に説明しています。特に映像講義は1年半前に制作された講義であり、現在PDF講義はコーディングワークスが指導した学生たちの実際の事例と説明が最新アップデートで100%反映されています。

Q. ビデオ講義とPDF講義のどちらを受講する必要がありますか？

映像講義とPDF講義は受講生が好みに応じて選択すればよいと考えられます。
映像講義の場合は、フルスクリーンモダル、スリックスライダー、UIkitの使い方、CSS Mobile Mockupなど、実際にパブリッシングされる部分を映像と説明を通じて詳細に取り上げます。一方、PDF講義は映像と説明を通してではなく、地面を通して説明する部分が違いがあります。

もしFull Screen Modal、Slick Slider、UIkitの使い方、CSS Mobile Mockup制作に関する映像講義が必要な場合は、<面接と就職を呼ぶ'パブリッシャー個人ポートフォリオホームページ'制作>映像講義で補強してください。

Q. 映像講義にも受講生に提供されるPDF資料がありますが、それと違うのですか？

映像講義で提供するPDFは1年6ヶ月前に製作された資料で、全ページ数は104ページです。映像講義で提供するPDFにも全体的な内容は似ています。しかし、映像講義のための参考資料なので、<パブリッシャー個人ポートフォリオホームページ制作完璧ガイド(PDF)>資料よりページ別の説明は詳細ではありません。 <パブリッシャー個人ポートフォリオホームページ制作完全ガイド（PDF）>は合計221ページで構成され、映像講義で提供するPDFのすべての内容を含めながらさらに詳しく説明されています。特に、最近の1年6ヶ月間に新たにトレンドに合わせて追加された内容と実際の学生作品がはるかに更新されました。

❤コーディングワークスの受講生に来たパブリッシャー合格ニュース

▲国費支援パブリッシング過程 私に4ヶ月半ほど学んだ学生ですが、就職したとカトクが来ました。

▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)

❤コーディングワークスの受講生がパブリッシャー就職後に送ってくれたメール

先生こんにちは:)

先生 Inflearn 講義聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか？😊😊

相違ではなく、
先生にアドバイスを得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります！

でも！
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました！
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー！仕事だけができる会社に入るようになりました。

キャリア職のパブリッシャーを求める会社でしたが、新入社員に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました

これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました！

実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました！

学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます

切に欲しかったし、
先生がおっしゃっていた通り信じていたら、本当に良い結果が出ました。

本当にありがとうございました！

コロナに注意してください。
また良い講義で会いたいです:)

先生こんにちは〜Inflearn受講生OOOです〜メールアドレスは他の受講生の回答見てわかりました..😊😊

ありがとうご挨拶お願いします

これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一面面接に合格して出勤することにしました。 本当にありがとうございました。

実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が、本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ～ 😊😊

その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。

これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング～！

🙋🏻‍♂️質問する前に必ず！読んでください〜！

学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合は、HTML、CSS、JSのコードをすべてアップロードしてください。

質問文にコードなしでグローだけ問題を説明すれば、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。

▲該当の講義コミュニティのよくある質問の見方をまず確認してください〜

⚡効果的な学習のためにぜひ！コーディングワークスパブリッシングYouTubeを参照してください。

コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks

セクション 1. 個人ポートフォリオホームページ制作前の注意事項及び注意事項

• ポートフォリオの概念を理解する
• 必ず知らなければならない必読事項及び注意事項
• 個人ポートフォリオホームページ制作手順(Road Map)
• パブリッシャーとしてPhotoshop UIデザインのスキルが必要な理由
• 雇用と実務適応のためのパブリッシング基礎と望ましいコーディング習慣

セクション2.個人ポートフォリオホームページセクション構成/フォルダ構造/絶対アドレス対相対アドレス

• 全セクションの構成
• フォルダ構造の重要性
• 絶対アドレス対相対アドレス
• フォルダ構造の作成

セクション 3. 個人ポートフォリオホームページ セクション別のレイアウトとコンテンツの構成

• Intro Section
• About Section
• スキルセクション
• Mobile Web Publishing Section
• Mobile Web Sub Page
• Website Publishing Section
• クローンコーディングセクション
• Practical Coding Section
• SCSS(SASS) Publishing
• Graphic Works Section
• Epilogue Section

セクション4.レスポンシブWebの作成/機能定義/ HTMLワイヤフレーム

• レスポンシブWebタスクで必要なメディアクエリ
• レスポンシブ Web タスクの必須項目とヒント (Tip)ip)
• ジェイクエリプラグインの使用範囲
• 全ウェブサイト機能定義書＆HTMLワイヤフレーム
• モバイルWeb機能定義書＆HTMLワイヤフレーム
• 本番パブリッシングHTMLワイヤフレーム

セクション 5. 個人ポートフォリオホームページ パブリッシングワークピースの作成 ロードマップ

• 詳細に入る前に
• パブリッシャー雇用のポートフォリオ成果物の種類と数
• 本番パブリッシング成果物の準備 - カテゴリの種類と数
• 本番パブリッシング結果カテゴリを分類する（1） - カードUI
• 本番パブリッシング結果カテゴリを分類する（2） - ナビゲーション
• 本物のパブリッシング成果物カテゴリを分類する（3） - CSSキーフレームアニメーション
• 本物のパブリッシング結果カテゴリを分類する（4） - タブコンテンツ＆アコーディオンコンテンツ
• 実績出版物の結果カテゴリを分類する（5） - フォーム要素の操作
• 本番パブリッシング結果カテゴリを分類する（6） - マウスホバーエフェクト
• 本番パブリッシング成果物カテゴリーを分類する（7） - プロトタイプウェブページ
• 実績パブリッシング成果物カテゴリを分類する（8） - SCSS（SASS）実戦例
• 本番パブリッシング成果物を作成するための効率的な方法
• 本番パブリッシングの例を自分のスキルと成果に変換する

セクション6.ターゲットデザインを探す/コーディングワークス推奨UI/UXプロトタイプウェブサイト

• デザインキャリアもターゲットデザインに基づいたデザイン
• デモウェブサイトでターゲットデザインを探す
• ターゲットデザインをPhotoshopでUIデザインする
• ウェブサイトキャプチャクローム拡張 - クールなスクリーンショットとスクリーンレコーダー
• 新入社員にとって最もデザインが難しいセクションです。
• セクションデザインアプリケーションの例（01〜05）
• コンテンツを追加する良いセクションUIパブリッシングの完成した例（01〜03）
• コーディングワークス推奨UI/UXプロトタイプウェブサイト実習

セクション 7. セクション別実戦パブリッシング (iframe, フォントアイコン, レイアウト, 詳細 CSS)

• iframeタグを理解する
• Font Iconを使う
• 世界のすべてのCDN
• フォント書式に関するヒント（Tip）
• 個人ポートフォリオのホームページに絶対にしてはいけないこと
• 画像容量を減らす
• 著作権無料ダウンロードサイト総まとめ
• パブリッシャーが理解する必要があるモニターの解像度
• 生産性を200％向上 デュアルモニター（Dual Monitor）作業環境
• セクション別実戦パブリッシング - Full Screen Modal
• セクションごとのコンテンツの表示 - UIkit Lightbox
• セクションごとのコンテンツの表示 - UIkit Slider
• セクションごとのコンテンツの表示 - フルスクリーンモーダルで結果を表示する
• セクション別コンテンツの表示 - モバイル Web パブリッシングワークピースの作成
• セクションごとのコンテンツを表示する - 実践的なパブリッシング結果のサムネイルを作成する
• セクション別実戦パブリッシング - 実践方法
• セクションごとの実践パブリッシング - クローンコーディングセクションの実践
• セクションごとの実践パブリッシング - モバイルWebパブリッシングセクションの実践
• セクションごとの実践パブリッシング - ウェブサイトパブリッシングセクションの実践
• セクションごとの実践パブリッシング - 実戦パブリッシングセクションの実践
• 中級レベルの練習 - ジェイクエリーロードメソッド、コールバック関数の使用、ナビゲーションのチェック
• JQuery＆JavaScriptを使用したスクロール後のヘッダーデザインの変更

セクション8.個人ポートフォリオホームページWebホスティング

• カフェ24 Webホスティング申請して個人のホームページドメインを入手する
• FTPプログラムファイルジラのダウンロード、インストール、使用方法
• カフェ24ログイン後に私のサービス管理に入る
• FTPパスワード確認と個人ホスティング内容の初期化（フォーマット）

【受講生ダウンロード】PDF学習に役立つ完成本と参考資料

• [機能定義書PDF] HTMLワイヤフレーム+機能定義書
• [機能定義書PDF] HTMLワイヤフレームOnly
• [おすすめテンプレートPDF]パブリッシャー職務スキル
• 完全なフォルダ構造の例（userid.cafe24.com）
• [ファイル完成本]モバイルモックアップ2種（iPhone、ギャラクシー）
• [ファイル完成本] コンテンツを入れる 良いセクション UI パブリッシング完成本
• [実習ファイル完成本]コーディングワークスおすすめUI UXプロトタイプウェブサイト
• [実習ファイル完成本] セクション別実戦パブリッシング(フォント書式)
• [実習ファイル完成本]モバイルWebワイヤフレームUIデザイントランジション（transition）
• [練習ファイルの完成]モバイルWebセクション（Load Method、Navigation Check）
• [練習ファイル完成本]ジェイクエリ＆JavaScriptを使用したスクロール後のヘッダデザインの変更
• [セクション実習ファイル完成本]セクション別実戦パブリッシング01（クローンコーディングセクション）
• [セクション実習ファイル完成本]セクション別実戦パブリッシング02（モバイルWebセクション）
• [セクション実習ファイル完成本]セクション別実戦パブリッシング03（ウェブサイトパブリッシングセクション）
• [セクション実習ファイル完成本] セクション別実戦パブリッシング 04（実パブリッシングセクション）

✒知識共有者の紹介

[HTML+CSS+JS 本番ポートフォリオ（シーズン3）]講義を行ったコーディングワークスは、現在まで300人以上の国費パブリッシング課程の学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、学生のほとんどのコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。