レスポンシブウェブサイトポートフォリオ (App Official Landing) 制作過程
'計22時間以上 のレスポンシブウェブサイトポートフォリオ講義' '核心理論の授業とレスポンシブウェブサイト制作過程' 'パブリッシャー就職のためのレスポンシブポートフォリオホームページ制作コース ' '実務パブリッシングの真の実力のためのハードコーディング授業 ' '9時間以上の必須jQueryプラグインの使用方法およびCSS必須核心理論動画' '現職パブリッシャー兼パブリッシング専門講師の丁寧で体系的な授業 '
📔 レスポンシブウェブサイトのポートフォリオ制作過程の特徴
01) 純粋なCSSレイアウト配置方式で作るレスポンシブウェブサイト
02) クローンサイトやコピーサイトではなく、CodingWorksが直接UIデザインからパブリッシングまで制作したウェブサイト
03) 講義セクション別14段階のステップ別完成版とUIデザインPSDファイルを提供 ※ フォトショップUIデザインはPhotoshop CC 2019バージョンで制作されました。
04) 合計22時間以上の制作講義
05) 理論学習と制作のためのテキストエディタ 今回のレスポンシブウェブサイト制作講座で使用されたテキストエディタは、Visual Studio Code とBrackets です。もちろん、他のテキストエディタを使用しても問題ありません。受講生の方が使い慣れたテキストエディタを使用してください。ただし、リアルタイムプレビュー機能がないテキストエディタは、学習を進めるのが大変かもしれません。
06) スムーズな制作過程の学習に不可欠な核心理論動画(Slick Slider, Reveal Animation) レスポンシブウェブサイトのポートフォリオ(App Official Landing Website)制作講義を除き、jQueryプラグインの使用方法や制作に不可欠なCSS理論など、9時間以上の核心理論講義動画があります。これらの動画を見ずに実践制作セクションに進むと、ついていくのが大変かもしれません。[セクション 2. 必須jQueryプラグインの使用方法およびCSS必須核心理論] で、聞き慣れなかったり不足していると思われる内容を十分に学習してから進んでください。
💡 PCレイアウト セクション切り替え プレビュー(Preview)
💡 Mobile レイアウト UI/UX プレビュー(Preview)
🙋🏻♂️ 講義受講のための事前知識
今回のレスポンシブウェブサイト制作の難易度は、入門または初級の方には難しいです。受講レベルは中級、あるいはそれに近いレベルであれば、スムーズに付いてくることができます。少なくとも自分は初級ではないと思っている方であれば、進める上で大きな困難はないと考えています。
受講のための事前知識としては、HTML+CSSに関する基本的な内容を理解していれば大丈夫です。だからといって、HTML+CSSを完璧に使いこなせる状態である必要はありません。20時間を超える講義の中で、余裕を持って十分に説明しています。もし動画を見ながら受講生の方のコーディングが追いつかず、HTML+CSSの作成が遅れてしまう場合は、動画を止めてHTML+CSSの作成を終えてから、次のステップに進んでいただければと思います。
動画を止めてコーディングをしたりするため、他の人より少し時間が必要なだけです。むしろ、落ち着いて自分でコーディングする時間を持つという面では、その方が良いです。あまり心配せずに、一緒に勉強していきましょう。 ^^
私の講義の中に'HTML+CSS+JQUERY ポートフォリオ中級実戦パブリッシング講義 ' があります。この講義にある理論内容と実戦例題の制作内容に、今回のレスポンシブウェブサイト制作に必要な内容がほぼすべて含まれています。つまり、HTML+CSS+JQUERYの基礎を確実に固めることができる講義だと思います。
今回のレスポンシブウェブサイト制作において、いくつかを除いては'HTML+CSS+JQUERYポートフォリオ中級実戦パブリッシング講義 'の内容を1回程度学習してから進めていただければ、よりスムーズに理解できると思います。
結論は…
入門や初級でなければついてくるのは問題ありませんが、少し大変だと感じられるかもしれません。 他の講義を通じてHTML+CSSの基本を身につけてこられたのであれば、十分についてこられるだけでなく、なぜこのようにするのかという理解を持ってレスポンシブウェブサイトの制作過程を終えることができると思います。
📕 効率的な学習のためのコーディングワークスの学習方法の提案
学習方法は人それぞれ異なると思います。そのため、正解はありません。しかし、経験者であり制作者が考える効率的な学習方法は存在すると考えています。そこで、コーディングワークスが考える効率的な学習方法を提案します。
[ステップ1] セクション3からセクション16まで、全体の制作過程を実習なしで映像を最初から最後まで見ます。 (12時間を超える制作過程なので、ただ見るだけでも簡単ではありません。ですので、移動中や食事中などに気軽に見てください。ただ何を作るのか、どのような順序で作るのか程度を注目して見れば大丈夫です。)
[ステップ2] ステップ1を行うと、どの部分に理論が必要か、どの部分に準備が必要かが自然と分かるようになります。そうすれば、そのような部分を完璧にではなくても、制作に必要な理論事項をある程度学習します。 基礎レベルの方でなければ、セクション2「必須jQueryプラグインの使い方およびCSS必須核心理論」に動画を用意してありますので、不足することはないと思います。ただし、擬似クラス、セレクタなどHTML+CSSの必須の理論事項は、CodingWorksのYouTubeチャンネルで勉強してください。
[ステップ3] セクション3から動画をじっくり見ながら実習を進めてください。 事前準備が十分に整っているので、ついてくるのがずっと楽になると思います。
[ステップ4] 映像と一緒にレスポンシブウェブサイト全体の制作を終えたら、提供されたフォトショップPSDファイルを開き、UIデザインを自分なりのテーマを決めて修正してください。レイアウトに大きな変更は加えず、既存のレイアウトを部分的に修正して個人ポートフォリオのUIデザインを完成させてください。
[ステップ5] 制作したUIデザインを基に、PPTで機能定義書とHTML構造を作成し、実践パブリッシングを進めて完成させてください。 これで、あなただけのデザインポートフォリオとパブリッシングポートフォリオが完成します。
🙋🏻♂️ 講義に関する予想される質問 と必読事項
Q. 制作例を進める中で出てくる中級CSS理論の解説動画はありますか? A. 「制作例を作っていますが、基礎理論に出てこなかった中級理論がたくさん出てきます。中級理論のレッスンはどこで受けられますか?」 という質問が掲示板によく寄せられます。
現在のコースは、初級パブリッシングの例題制作を行うコースではありません。初級〜中級のパブリッシング例題を制作するコース です。そのため、CSSの初中級理論はある程度理解している必要があります。といっても、必ずしも完璧に理解している必要はありません。CSSの初中級理論は、例題を制作しながら継続的に繰り返します。また、CodingWorksのYouTubeパブリッシングチャンネルに「[中級理論] CSS中級理論」という再生リストがあり、例題制作に必要な必須の中級理論動画が詳しく用意されていますので、現在のコースを受講しながら中級理論を並行して学習することをお勧めします。
▲ コーディングワークス YouTube チャンネルはこちら
Q. この講座を受講すれば、実務でパブリッシャーとして働けますか? A. この講座にあるパブリッシングの内容をすべて理解し、うまく活用できるのであれば可能です。しかし、パブリッシングというのは十分な経験と、多様な種類のウェブサイトを制作した経験があってこそ実務で働くことができます。本講座のような講義をあと数個学習し、ウェブサイト制作の全工程をいくつか経験すれば大丈夫だと思います。もちろん、個人のポートフォリオサイトの制作も必要です。パブリッシングの参入障壁は思ったより高い方です。動画を一度見ただけで、その内容やノウハウがすべて身につくわけではないので、前述した学習方法を通じて自分のものにするプロセスを大切にしてください。
Q. ウェブサイトを制作しながら出てくる理論を説明する理論パートが別にないようですが? A. 今受講されているコースは入門、初級コースではなく、中級レベルのレスポンシブウェブサイト全体の制作パブリッシング講義です。基本理論パートと実践例題制作の学習は、他のコースを通じてスキルアップされることをお勧めします。
Q. 学習中に分からないことがあったら、どこに質問すればいいですか? A. 質問がある場合は、[質問&回答] 掲示板に投稿していただければ、確認次第(すぐには難しい場合もありますが)回答いたします。また、質問はできるだけ具体的に作成してください。質問が具体的でない場合、十分な回答を差し上げることが難しくなります。そのため、質問される際は、気になる内容とともに、作成中のHTML、CSS、JQUERYのコーディング画面をキャプチャして添付していただければ、よりスムーズに回答できます。
Q. 講師の授業の中で <パブリッシャー就職 ガチ実践ガイド> を先に見たほうがいいでしょうか? A. パブリッシングスキルをさらに習得することも重要ですが、まずはパブリッシャーとしての基本を身につけることが優先されるべきです。パブリッシャー就職実践ガイド電子書籍(PDF)では、パブリッシングの基本とは望ましいコーディング習慣と原則、経験者のようにパブリッシングする方法など、パブリッシャーとして必ず知っておくべき内容を細かく整理しました。パブリッシャー就職実践ガイド電子書籍(PDF)を先に読み、パブリッシングの基本に対する理解を十分に深めてから学習されることをお勧めします。下の画像をクリックすると、授業の紹介内容をご覧いただけます。
▲ パブリッシャー就職のためのコーディングワークス・パブリッシング講義ロードマップ
❤ コーディングワークスの受講生から届いたパブリッシャー合格の知らせ
▲ 国費支援パブリッシング課程で私から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
👨🏼🏫 講師紹介
(現在)フリーランス フロントエンドパブリッシャー
ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
イゼンコンピューターアカデミー ウェブパブリッシング講師
フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
イゼンコンピューターアカデミー ウェブデザイン技能士 実技資格対策クラス
ラクピアICTトレーニングセンター フロントエンドパブリッシングマスターコース講師
イジエンエデュフロントエンドパブリッシング、UI/UXデザイン
HTML+CSS+JQUERY パブリッシング YouTube チャンネル 'コーディングワークス' 運営
⚡ コーディングワークス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
面接と就職を勝ち取るパブリッシャー個人ポートフォリオホームページ制作、scss、sass、flex、grid、html、css、html/css、website、ウェブパブリッシャー、パブリッシャー就職、ウェブサイト、コーディング、coding、jquery、javascript、ジェイクエリ、JavaScript、レイアウト、インタラクティブウェブ、interactive web、web design、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン技能士実技試験、bootstrap、ブートストラップ、css frameworks、フレームワーク