inflearn logo
知識共有
inflearn logo

パブリッシャー個人ポートフォリオホームページ制作完全ガイド(PDF)

就職のためには面接を頻繁に受ける必要があります。面接の機会を増やすためには、質の高いパブリッシャーの個人ポートフォリオサイトが不可欠です。CodingWorksが心血を注いで作成した、質の高い個人ポートフォリオサイト制作ガイド教材(PDF)です。 この教材は、インターネットで検索して手に入るような内容ではありません。CodingWorksが長年現場で300人以上の学生にパブリッシングの理論、実践、個人ポートフォリオサイト制作を講義し、学生たちが一日も早く希望する企業に就職できるよう、個人ポートフォリオサイトの制作方法を詳細に盛り込んだ、世界に一つだけのパブリッシャー就職用個人ポートフォリオサイト制作ガイド(PDF)です。

難易度 初級

受講期間 無制限

Portfolio
Portfolio
Web Design
Web Design
HTML/CSS
HTML/CSS
Portfolio
Portfolio
Web Design
Web Design
HTML/CSS
HTML/CSS

学習した受講者のレビュー

学習した受講者のレビュー

4.6

5.0

power1004pow

94% 受講後に作成

お金を与える時間を買う :)

5.0

고창우

100% 受講後に作成

最終プロジェクトのときに多くの助けになりました。 本当にありがとうございました。

5.0

이유정

100% 受講後に作成

向きを取れなかったポートフォリオのおおよその枠組みをつかむことができ、お得な授業でした!このポートフォリオで就職までぜひ成功してほしいです..!

受講後に得られること

  • 個人ポートフォリオホームページ制作前の参考事項 & 注意事項

  • 個人ポートフォリオホームページのセクション構成/フォルダ構造/絶対パス vs 相対パス

  • 個人ポートフォリオサイトのセクション別レイアウトおよびコンテンツ構成

  • 個人ポートフォリオサイトのコーディング制作ロードマップ

  • ターゲットデザイン探し / コーディングワークスおすすめUI/UXプロトタイプウェブサイト

  • セクション別実践パブリッシング(iframe、フォントアイコン、レイアウト、詳細CSS)

  • 個人ポートフォリオサイトをウェブホスティングする

  • レスポンシブウェブ制作の必須理論とノウハウ

  • 機能定義書+HTMLワイヤーフレームの詳細な作成方法

  • モバイルウェブパブリッシング制作の必須理論とノウハウ

  • パブリッシャー個人ポートフォリオホームページ制作完全ガイド(PDF)および活用例

どこでも手に入らないノウハウを
コーディングワークスの電子書籍講座で手に入れてください 📔

個人ポートフォリオサイトのコンテンツ構成とUI/UXデザインは、
応募者の立場ではなく、応募者を採用する採用担当者の立場で制作されなければなりません。

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

ウェブサイトのパブリッシング作業というのは難しいものです。その中でも、個人のポートフォリオサイトを作るのが最も難しいと思います。例えば、ショッピングサイトを作るとなれば、一般的な型というものがあります。そして、参考になるウェブサイトも溢れるほどあります。そのため、経験のないパブリッシャー志望者であっても、それほど苦労せずにアイデアを得てUI/UXデザインを行うことができます。やはり、出来上がるものも大抵は悪くない仕上がりになります。しかし、個人のポートフォリオサイトには決まった形がありません。それだけでなく、参考になるウェブサイトもほとんどありません。そのため、何をどこからどのように始めればいいのか分かりません。さらに、よく出来た個人ポートフォリオサイトの制作基準も曖昧です。だからこそ、作るのは難しいのだと思います。

国費パブリッシング課程は約5ヶ月間行われます。最初の2週間はグラフィックツールを学び、残りの4ヶ月半をパブリッシングの学習とポートフォリオ制作の時間に充てるのが一般的です。講師によって多少の違いはありますが、ほとんどがそうです。私の経験上、4ヶ月半という期間の中で最も授業が大変で、説明も多く、準備もたくさん必要なのが、まさに課程終了前の3週間です。コーディングワークスでは、課程終了の3週間前に個人ポートフォリオサイトの制作を開始し、課程が終わる前に完成させます。そのため、学生がいわゆる「空白期間(ターム)」なしに面接を受けて早く就職できるよう、タイトにカリキュラムを進行します。

前述した通り、正解が決まっていない個人ポートフォリオサイトの制作を教えるのは非常に困難です。一人ひとり好みも違えば実力の差もあるため、講師が1〜2つのパターンを決めて「このように作りなさい」と指示することはできません。個人ポートフォリオサイトの基本的な枠組みと目的を学生に認識させ、学生自らが作り上げていくように指導しなければならないため難しいのです。もちろん、学生にとっても簡単な制作過程ではありません。しかし、経験者のサポートを3週間継続して受けながら制作するため、ほとんどの学生が納得のいく成果物を作り上げることができます。

独学でパブリッシャー就職を準備している人、または国費パブリッシング課程を修了したものの、期間内に個人ポートフォリオサイトを制作できなかった人の立場では、個人ポートフォリオサイトを一人で作るしかありません。これは非常に難しいことです。経験者の助けを3週間継続して受けながら作ったとしても難しいのです。それを一人で、何のガイドもなく作るということは、本当に大変なことです。もちろん、作ること自体が難しいと言っているわけではありません。誰が見ても納得できる質の高い個人ポートフォリオサイトを作ることが難しいという意味です。そこで、コーディングワークスが国費パブリッシング課程の3週間で行う個人ポートフォリオサイト制作授業の内容のすべてを、このPDF教材に込めました。

個人ポートフォリオのホームページ制作は、一定のパブリッシングスキルがあれば誰でも作ることができます。しかし、ほとんどの人が目的を見失った成果物を作り、それを見せながら非常に満足してしまいます。ですが、面接の連絡は来ません。面接の連絡が来たとしても、勤務条件や年収において主導権を握ることができません。よく作り込まれた個人ポートフォリオのホームページは、単に就職するための目的ではなく、面接で堂々と、そして良い勤務条件で働くことができるパブリッシャー志望者の最も重要なスペックになります。

今回制作された「個人ポートフォリオホームページ制作完全ガイドPDF教材」には、国費パブリッシング課程の最後の3週間と同様に、多くのノウハウとヒントが詰め込まれています。特に、採用担当者の視点に立って制作されるべきという目的に忠実な内容で構成されています。「個人ポートフォリオホームページ制作完全ガイドPDF教材」を通じて、パブリッシャー志望者自身が本当に納得のいく個人ポートフォリオホームページを制作できると信じています。

🌿🌿🌿

講義テーマ 📖

講義の目標は一言で言うと「早くパブリッシャーとして就職すること」です。就職のためには面接をたくさん受ける必要があります。面接をたくさん受けるためには、質の高いパブリッシャー個人のポートフォリオサイトが必ずなければなりません。これは、質の高い個人ポートフォリオサイト制作のガイド教材(PDF)です。

講義企画の背景 ⚡

コーディングワークスの講義の中に、<面接と就職を呼ぶ「パブリッシャー個人ポートフォリオホームページ」制作>という動画講義があります。この講義は1年半前に制作されたものです。受講生の皆さんがパブリッシャーとして早期就職できるよう、質の高い個人ポートフォリオホームページを制作するための動画講義を準備し、公開するにあたってかなりの努力を注ぎました。しかし、もっと教えるべきことがたくさんあったのではないか……例えば、機能定義書+HTMLワイヤーフレームの構造作りといった内容や、モバイルウェブ制作に関する内容をもっと詳細に扱うべきだったのではないか……といった心残りが多くありました。コーディングワークスとしても、動画レコーディングという特性上、少し急いで制作してしまった部分を補完したいと考えていました。そして、ここ1年半の間に積み上げてきた受講生の個人ポートフォリオホームページの実際の実例とともに、ノウハウやヒントをもっと共有したいと思いました。


講義の特徴 ✨

<パブリッシャー個人ポートフォリオホームページ制作完全ガイド(PDF)>の教材内容は、インターネットでググって手に入るような内容や資料ではありません。CodingWorksが数年間、現場で300人余りの学生にパブリッシングの理論、実践、個人ポートフォリオホームページ制作を講義し、学生たちが一日も早く希望する企業に就職できるように制作しました。個人ポートフォリオホームページ制作という漠然とした作業において、学生自らが具体的で質の高い成果物を制作できるよう、制作期間中に非常に多くの授業内容を細部にわたるまで、素早い理解のために具体的な事例と説明を通じて進めていきます。

そこで、個人ポートフォリオサイトの制作方法を詳細に盛り込んだ、世界に一つだけのパブリッシャー就職用個人ポートフォリオサイト制作ガイド(PDF)です。

パブリッシャー個人ポートフォリオホームページ制作完璧ガイド(PDF)の差別化された特徴

  • 個人ポートフォリオホームページ制作の概念と制作手順を理解
  • 個人ポートフォリオホームページのセクション構成を理解
  • 実務で必須となるフォルダ構造/絶対パス vs 相対パスの概念を理解
  • 体系的なパブリッシングのための機能定義書+HTMLワイヤーフレームの詳細な作成法
  • レスポンシブウェブ制作の必須理論とノウハウ
  • 誰でも始められるコーディングワークスおすすめUI/UXプロトタイプウェブサイト制作の説明
  • セクション別実戦パブリッシング(iframe、フォントアイコン、レイアウト、詳細CSS)の理解
  • 最終段階である個人ポートフォリオホームページのウェブホスティングの理解
  • モバイルウェブパブリッシング制作の必須理論とノウハウ

講義を受けた後の受講生の姿 📜

講義を受講した後は、納得のいくパブリッシャー就職用個人ポートフォリオサイト制作のために、受講生自らができることが多くなります。できることが増えた分、採用担当者にアピールできる個人ポートフォリオサイトを制作できるようになり、面接の機会も増え、就職も早まる可能性があります。もちろん、すべての人に当てはまるわけではありません。このPDF講義のガイドにしっかり従い、受講生本人の努力があれば、十分に可能だと考えています。


学習内容 📚

このPDF講義を企画し完成させるまでに、ほぼ2ヶ月という時間がかかりました。私は1ヶ月前に5ヶ月間の国費パブリッシング課程を終えたばかりで、終了する1ヶ月前にPDF講義を企画し、課程終了後にPDF教材の作成を開始しました。すぐに本を書こうと思った理由は、記憶が鮮明なうちに執筆することで、受講生の皆さんに臨場感のある内容を、漏れなくお伝えできると考えたからです。

本講義がPDF教材という特性上、プレビュー動画をお見せできない点が残念です。 そのため、PDF教材の一部をスクリーンショットでお見せするしかありませんが、Coding Worksが断言できるのは、<パブリッシャー個人ポートフォリオホームページ制作完全ガイド(PDF)>講義を通じて、採用担当者が満足できる個人ポートフォリオホームページを制作できるということです。

 

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

 

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

 

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

 

▼ セクション 4. レスポンシブウェブ制作 / 機能定義書 / HTMLワイヤーフレーム

 

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

 

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

 

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

 

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


予想質問 Q&A 💬

以下にある予想質問Q&A以外の質問は、該当講義のコミュニティ質問掲示板に投稿していただければ、CodingWorksが最善を尽くしてお答えいたします。

Q. 予備知識や準備事項は必要ですか?

パブリッシャーへの就職のために学習を始めたばかりの方には向いていません。本講義はある程度パブリッシングの理論学習を終え、パブリッシャー就職のために個人ポートフォリオサイトを準備する必要性を感じている段階の受講生の方に適しています。もちろん、始めたばかりの方も、最終的にはパブリッシャー就職のためにしっかりとした個人ポートフォリオサイトの制作が必要になります。本PDFセクションの中の「個人ポートフォリオサイト・パブリッシング制作物作成ロードマップ」セクションで、パブリッシングポートフォリオをどのように準備し、作成すべきか詳細に説明されています。事前に目を通しておけば、今後の学習と同時に、どのようにパブリッシングの成果物を準備すべきか、方向性がはっきりと定まります。

Q. どのような人にこの本が必要ですか?

新人パブリッシャー志望者として、質の高い個人ポートフォリオサイトの制作が必要な方、ウェブデザイナーやグラフィックデザイナーでパブリッシャーへの転職のために質の高い個人ポートフォリオサイトが必要な方に、最も必要な講義だと思います。特に、独学でパブリッシャー就職を準備されている方、国費のパブリッシング課程に通ったものの、納得のいく就職用個人ポートフォリオサイトを作れずに修了された方が対象となります。

Q. ページ数と内容はどのようになっていますか?

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

インターネットにあるありふれた、誰にでもできるような内容ではなく、CodingWorksの長年のノウハウが忠実に詰め込まれた価値ある資料だと自負しております。

Q. 差別化された核心的なコンテンツは何ですか?

ほとんどが差別化されたコンテンツですが、特にパブリッシングの実力を高め、納得のいくパブリッシャー就職用個人ポートフォリオサイトを制作するために不可欠な「機能定義書+HTMLワイヤーフレーム構造」の制作について詳しく説明します。そして、すべてのセクションを作成する実戦セクション制作において、HTML+CSS+JSコードに関する核心的なコードレビューを行います。実戦セクション制作の完成版も、受講生ダウンロードセクションですべてダウンロードできるように用意されています。

国費パブリッシング課程の3週間にわたり、個人ポートフォリオサイトを制作する際、学生たちに教えているウェブ用語、制作ノウハウ、実務制作のコツ、ファイル管理、フォルダ管理、サムネイル画像の制作など、非常に多くの内容を伝えていますが、そうした部分が該当のPDF教材に盛り込まれています。

Q. ダウンロード後にアップデート事項はありますか?

電子書籍の特性上、頻繁なアップデートはほとんどありません。しかし、パブリッシャー就職ガイドとして知っておくべき内容がある場合は、PDFファイルが修正・アップロードされ、すぐに「新着情報」として受講生の皆様にお知らせいたします。

Q. コーディングワークスの講義の中で、<面接と就職を呼ぶ「パブリッシャー個人ポートフォリオホームページ」制作>の動画講義とはどのように違うのですか?

全体的な講義の目的と内容は似ています。2つの講義とも、質の高いパブリッシャー就職用の個人ポートフォリオホームページを制作し、パブリッシャーとしてより早く、より良い条件で就職することを目標に制作された同一のコンテンツです。どちらもCodingWorksが真心を込めて作った講義ですが、違いは以下の通りです。

動画講義はその特性上、直感的に理解でき、動画を見ながら学習することで自然と成果物が完成するというメリットはありますが、受講生が自ら考え解決していくことで、創造的に自分だけの個人ポートフォリオサイトを作り上げる実力を養うには限界があります。

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

Q. 動画講義とPDF講義のどちらを受講すべきですか?

動画講義とPDF講義は、受講生の好みに合わせて選択していただければと思います。
動画講義の場合、Full Screen Modal、Slick Slider、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ヶ月の間に新しくトレンドに合わせて追加された内容や、実際の学生の制作物が大幅にアップデートされています。


講師紹介 ✒️

パブリッシャー個人ポートフォリオホームページ制作完全ガイド(PDF)講義を制作した コーディングワークスは、現在まで300名以上の国費支援パブリッシング課程の学生に、パブリッシングの理論、活用、個人ポートフォリオホームページ制作を教えています。特にパブリッシャー就職のためのすべての準備過程をAからZまで完璧にガイドし、ほとんどの学生が課程終了後すぐに就職できるよう、長年パブリッシング講義だけを専門に行ってきた講師です。また、Inflearn(インフラン)でパブリッシング関連の講義を行いながら、受講生の皆様からも大変役に立ったという評価をいただいています。


 

❤ コーディングワークス受講生から届いたパブリッシャー合格の知らせ


▲ 国費支援パブリッシング課程で私から4ヶ月半ほど学んだ学生から、就職したとカトク(LINE)が届きました。


▲ コーディングワークスの個人ポートフォリオ制作オフライン講座の受講生から、面接・就職結果のLINE(カトク)をいただきました。(2023.4.24)

 

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

 

先生、こんにちは :)

先生のInflearnの講義を受けていた学生の金O正です。
今年の夏、個人ポートフォリオについてアドバイスをいただこうとメールを差し上げた学生です。
覚えていらっしゃいますでしょうか?(笑)

ほかでもありませんが、
先生にアドバイスをいただいたポートフォリオで、パブリッシャーとして就職に成功したという報告をしたくてメールを送りました!

しかも!!
求人サイト(サラムイン)に載せていたポートフォリオを見て会社側から先に連絡があり、Zoomで面接を受けて合格しました!
会社側は希望年収を尊重してくれましたし、デザインや開発業務を行わない、本当にパブリッシャー!としての業務だけに専念できる会社に入ることになりました。

経験者パブリッシャーを募集している会社でしたが、新人である私に連絡が来たので、なぜ私に連絡をくださったのかと尋ねたところ、
他の人たちのポートフォリオもたくさん見たけれど、私のポートフォリオにあった「機能定義書」が目に留まって連絡したとのことでした。

これらすべてが先生の講義のおかげだと思っています。
先生の講義を聞いていなければ、私もやはり平凡なポートフォリオになっていたはずですが、先生が教えてくださったコツのおかげで就職に成功することができました!

直接お会いしたことはありませんが、
ポートフォリオを作成している間、先生の講義を見ながらとても励まされ、信頼して一生懸命作りました!

塾で長い時間授業を聞きながら積み上げた実力よりも、先生の講義を聞いてポートフォリオを作った3ヶ月間のほうが、実力が格段に上がったと実感しています。

切に願っていましたし、
先生がおっしゃった通りに信じて取り組んだところ、本当に良い結果が出ました。

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

コロナにお気をつけて
また良い講義でお会いしたいです :)


先生、こんにちは〜。Inflearn受講生のOOOです〜。メールアドレスは他の受講生への回答を見て知りました(笑)

感謝の気持ちをお伝えしたくて。ww

これまで先生の講義を受講し、2週間ほど履歴書を出しながら苦労もしましたが…
ある会社から面接合格をいただき、出勤することになりました。本当にありがとうございます…(涙)

実は私が32歳ということもあり、不安が多かったです。履歴書をたくさん送ったのですが、連絡もあまり来なくて…
ですが、この会社の採用担当者の方は、自分はスクール出身者は好きではないとおっしゃっていました(笑)
私が入社することになった会社は規模は小さいですが、開発者もいてウェブデザイナーもいます。
3ヶ月間教育を受けてから実務に投入されるという形式でした。
距離も少しあり、年収も低い方ではありますが…一生懸命学んで年収を上げていこうと思います〜(笑)

これまで本当にありがとうございました。質問にも丁寧に答えてくださり、こうしてオンラインで講義を受けて就職が決まったので、とても不思議な気持ちです。

これからも先生の講義を聴きながら、さらに実力を高めて勉強していきます。ファイト〜!

 

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

学習を進める中で気になることがあれば質問してください。質問の際は、うまくいかない内容とコード、そしてブラウザの結果画面のキャプチャを添付してください。コードについては、HTML、CSS、JSのコードをすべて載せていただければ、正確な回答を差し上げることができます。

質問文にコードがなく、文章だけで問題を説明されると、非常に簡単な内容でない限り、正確な回答を差し上げることが難しくなります。そうなると、私が「HTML、CSS、JSのコードとブラウザのキャプチャをアップロードしてください〜」と再度返信せざるを得なくなり、結局、解決策を得るまでに手間と時間がさらにかかってしまいます。


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

 

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

コーディングワークス・パブリッシングのYouTubeチャンネルで、理論の動画講義を並行して視聴することをお勧めします。もちろん、すべての理論動画がYouTubeチャンネルにあるわけではありませんが、重要な理論動画はほとんど揃っています。動画の数が多いので、動画を探す際は以下の例のように検索するのが良いでしょう。

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

全体のカリキュラム 📚

パブリッシャー個人ポートフォリオホームページ制作完全ガイド(PDF)

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

  • ポートフォリオの概念を理解する
  • 必ず知っておくべき必読事項および注意事項
  • 個人ポートフォリオホームページの制作手順(Road Map)
  • パブリッシャーとしてフォトショップのUIデザインの実力が必要な理由
  • 就職と実務適応のためのパブリッシングの基礎と望ましいコーディング習慣

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

  • 全体のセクション構成
  • フォルダ構造の重要性
  • 絶対パス vs 相対パス
  • フォルダ構造の作成

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

  • Intro Section
  • About Section
  • Skill Section
  • Mobile Web Publishing Section
  • Mobile Web Sub Page
  • Website Publishing Section
  • Clone Coding Section
  • Practical Coding Section
  • SCSS(SASS) コーディング
  • Graphic Works Section
  • エピローグセクション

セクション 4. レスポンシブウェブ制作 / 機能定義書 / HTMLワイヤーフレーム

  • レスポンシブWeb制作における必須メディアクエリ
  • レスポンシブウェブ制作における必須項目とチップ(Tip)
  • ジェイクエリ(jQuery)プラグインの使用範囲
  • 全ウェブサイト機能定義書 & HTMLワイヤーフレーム
  • モバイルウェブ機能定義書 & HTMLワイヤーフレーム
  • 実践パブリッシング HTMLワイヤーフレーム

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

  • 詳細な内容に入る前に
  • パブリッシャー就職のためのポートフォリオ制作物の種類と数
  • 実践パブリッシングの成果物を準備する - カテゴリーの種類と数
  • 実践パブリッシング成果物のカテゴリー分類(1) - カードUI
  • 実践パブリッシング成果物のカテゴリー分類(2) - ナビゲーション
  • 実践パブリッシング成果物カテゴリー分類(3) - CSSキーフレームアニメーション
  • 実践パブリッシング成果物カテゴリー分類(4) - タブコンテンツ & アコーディオンコンテンツ
  • 実践コーディング成果物のカテゴリー分類(5) - フォーム要素の作成
  • 実践パブリッシング成果物カテゴリー分類(6) - マウスホバーエフェクト
  • 実践パブリッシング成果物のカテゴリー分類(7) - プロトタイプウェブページ
  • 実戦パブリッシング成果物のカテゴリー分類(8) - SCSS(SASS)実戦例
  • 実践パブリッシング成果物制作のための効率的な方法
  • 実践パブリッシング演習を自分の実力と成果物に変換する

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

  • デザイン経験者もターゲットデザインをベースにデザイン
  • デモウェブサイトでターゲットデザインを探す
  • ターゲットデザインをPhotoshopでUIデザインする
  • ウェブサイトキャプチャ Chrome 拡張機能 - Awesome Screenshot & Screen Recorder
  • 新人志望者にとって最もデザインが難しいセクションです。
  • Section デザイン応用例(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
  • セクション別コンテンツ表示 - フルスクリーンモーダルで制作物を表示する
  • セクション別コンテンツ表示 - モバイルウェブパブリッシング制作物作り
  • セクション別コンテンツ表示 - 実戦パブリッシング成果物サムネイル作成
  • セクション別実践パブリッシング - 実習方法
  • セクション別実践パブリッシング - クローンコーディングセクションを実習する
  • セクション別実践パブリッシング - モバイルウェブパブリッシングセクションの実習をする
  • セクション別実践パブリッシング - ウェブサイトパブリッシングセクションの実習
  • セクション別実践パブリッシング - 実践パブリッシングセクション実習する
  • 中上級レベルの実習 - jQueryのloadメソッド、コールバック関数の使用、ナビゲーションのチェック
  • ジェイクエリ & ジャバスクリプトを利用したスクロール後のヘッダーデザイン変更

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

  • Cafe24ウェブホスティングを申し込んで個人ホームページのドメインを取得する
  • FTPプログラム「FileZilla」のダウンロード、インストール、使用方法
  • Cafe24にログイン後、「マイサービス管理」に入る
  • FTPパスワードの確認および個人ホスティング内容の初期化(フォーマット)

[受講生ダウンロード] PDF学習に役立つ完成版および参考資料

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

講師紹介

[HTML+CSS+JS 実戦ポートフォリオ(シーズン3)] 講座を制作した コーディングワークスは、現在まで300名以上の国費パブリッシング課程の学生に、パブリッシングの理論、活用、個人ポートフォリオ用ホームページ制作を教えています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完璧にガイドし、学生の大部分が課程終了後すぐに就職できるよう、長年パブリッシング講義のみを専門的に行ってきた講師です。また、Inflearnでパブリッシング関連の講義を行いながら、受講生の皆様からも非常に役に立ったという評価をいただいています。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • パブリッシャー就職のために個人ポートフォリオサイトを制作する必要がある方

  • コーダー(パブリッシャー)就職のために、コーディングの実績物(ポートフォリオ)を準備する必要がある方

前提知識、
必要でしょうか?

  • HTML+CSS+JSの基本スキルおよび活用能力

こんにちは
codingworksです。

13,042

受講生

784

受講レビュー

2,122

回答

4.9

講座評価

23

講座

■ [現在] 国費パブリッシング&フロントエンド講師
■ [現在] フリーランス フロントエンドパブリッシャー
■ [現在] HTML+CSS+JQUERY パブリッシング YouTubeチャンネル「コーディングワークス」運営
■ グリーンコンピュータアカデミー ウェブパブリッシング講師
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ イゼンコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UX ウェブデザインポートフォリオ講義
■ ウェブデザイン技能士実技資格クラス講義
■ イージー&エデュ フロントエンド UI/UX デザインおよびパブリッシング

 

🌏コーディングワークス Inflearn 講義一覧 - https://www.inflearn.com/users/@codingworks
🌏Inflearn コーディングワークス 講義学習順序(学習ロードマップ) - https://www.inflearn.com/blogs/2351
🌏コーディングワークス Inflearn パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コーディングワークス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
🟣Inflearn In-focus コーディングワークス インタビューを見る : https://www.inflearn.com/pages/infocus-8-20230704

もっと見る

カリキュラム

全体

17件 ∙ (13分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

10件

4.6

10件の受講レビュー

  • nanayong06172599님의 프로필 이미지
    nanayong06172599

    受講レビュー 1

    平均評価 5.0

    5

    94% 受講後に作成

    • codingworks
      知識共有者

      受講評ありがとうございます〜

  • ujeongs1206266님의 프로필 이미지
    ujeongs1206266

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    向きを取れなかったポートフォリオのおおよその枠組みをつかむことができ、お得な授業でした!このポートフォリオで就職までぜひ成功してほしいです..!

    • codingworks
      知識共有者

      受講評ありがとうございます〜

  • power1004pow2896님의 프로필 이미지
    power1004pow2896

    受講レビュー 12

    平均評価 5.0

    5

    94% 受講後に作成

    お金を与える時間を買う :)

    • codingworks
      知識共有者

      深遠な受講評ありがとうございます〜!

  • navercom님의 프로필 이미지
    navercom

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    最終プロジェクトのときに多くの助けになりました。 本当にありがとうございました。

    • codingworks
      知識共有者

      受講評ありがとうございます〜!

  • agisori3112님의 프로필 이미지
    agisori3112

    受講レビュー 9

    平均評価 5.0

    5

    18% 受講後に作成

    • codingworks
      知識共有者

      スターポイント5点ありがとうございます!

codingworksの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール

¥26,950

30%

¥4,876