Graphic designer, Haneul Park_그래픽디자이너 박하늘 Details
※ 2024年 6月13日まで40名以上の方にご購入いただく講座については、検収作業を行いより精度の高い翻訳で提供する予定でございます。
※ 講義資料は映像公開日(2024年6月 7日)から60日以内、順次提供されます。正確な日程についてのご案内は出来かねる点、予めご了承ください。
初期段階から明確な企画、Figmaを活用した手軽なデザイン、簡単で明確なパブリッシングプロセスと効率的な管理のためのCMS*構築まで全コースを体験してください。
アーカイブが簡単自分の個性がたっぷり詰まったウェブサイトはデザイナーとして装備できるもう一つのポートフォリオです。
*CMS(Contents Managing System)とは、コンテンツ管理システムのことで資料管理や更新を便利にさせます。
パク・ハヌルのポートフォリオ
グラフィックデザイン
Webデザイン
講座の例題
本講座ではウェブサイトのデザインから完成までの全過程を学習します。
Part 01.Figmaで作るウェブサイトのデザイン
-
Figmaで作られるウェブサイトの設計:デスクトップver. -
Figmaで作られるウェブサイトの設計:モバイルver。
Part 02.最終的に実装するウェブサイト(パブリッシングからホスティングまで)
-
最終制作物
※上記の画像は、講座で実際に制作することになる例題です。
グラフィックデザイナー
パク・ハヌル
こんにちは、グラフィックデザイナーのパク・ハヌルです。
私は現在スタジオバトンでUIデザイナーとして働きながら、さまざまな分野のブランドのためのウェブサイトの仕事に参加しています。
同時にフリーランスデザイナーとして活動しながら、グラフィックデザイン、展示デザイン、ウェブサイトのデザインと実装までオンオフラインの複数のメディアで作業しています。
作成されたテンプレートに依存せずに完全に自分だけのコンテンツに合わせた個性的なポートフォリオウェブサイトを作成してください。

パク・ハヌル
現) スタジオバトンUIデザイナー
現) フリーランスデザイナー
[参加プロジェクト(スタジオバトン)]
「ファサードパターン」ウェブサイトデザイン2022
「モアビジョン」ウェブサイトデザイン2022
「マガジンB」ウェブサイトデザイン2022
「Osul Rockブランドストーリー&多日常」ウェブサイトデザイン2021
「HEIGHTS」ウェブサイトデザイン2021
[参加プロジェクト(フリーランサー)]
「足のない散歩」グラフィックデザイン2022
「Look Who's Talking」ウェブサイトのデザインと開発2022
「アッパーハウスVIPラウンジ」ウェブサイトのデザインと開発2022
「SMile Music Festival」グラフィックデザイン2022、2020
「時計の手」グラフィックデザイン2022
「Eugene Jung」ウェブサイトのデザインと開発2022
「ソウル新聞インタラクティブ記事」ウェブサイトのデザインと開発2022
「名前行進」ウェブサイトのデザインと開発2020
この講座のポイント
持続可能なポートフォリオ
管理システムの作成
常に先延ばしになるポートフォリオの整理。Webサイトを通じて構造化し、持続可能で簡単な「メディア固有のポートフォリオ管理システム」を作成してください。
コーディング初心者もOK、
練習しながら学ぶ制作ノウハウ
コーディングが初めてであるか、コーディングの壁にぶつかってみた方も、企画から最終ホスティングまで段階的に行ってみると、いつの間にか一つのウェブサイトを完成することになります。
自分のアイデンティティを盛り込んだ ポートフォリオウェブサイト
テンプレートでウェブサイトを作ると便利ではありますが、マンションが乱立しているような印象を与えてしまいかねません。テンプレートなしで独自の個性と構造を持つ、一戸建てのようなウェブサイトを作成する方法を学びましょう。
講座内容
下記のような内容を学べます。
-
個性を表現するウェブサイト企画ウェブサイトの目的と方向性を設定し、適切な使いやすさと個性を考慮したワイヤフレームを作成します。 -
お手本にならって学ぶFigma入門Figmaのフレーム、オートレイアウトなどの主な機能のしくみを理解し、実践的な例で基本機能をすばやく習得します。 -
詳細なプロトタイプ製作法便利なプロトタイプ機能とトリックを見て、実際に実装するウェブサイトに近い詳細なプロトタイプの作り方を学びます。
-
レスポンシブウェブサイト構造設計さまざまな比率とサイズのデバイス環境で柔軟に動作するレスポンシブウェブサイトの構造を見てください。 -
WordPress テーマを作成ビルダーやテーマを使わずに、比較的簡単にお好みのデザインで直接WordPressテーマを作成します。 -
フォーマット別ポートフォリオコンテンツ加工方式Instagram、Webサイト、PDFなど、さまざまなフォーマットでポートフォリオを公開するとき、コンテンツを加工するためのコツについて学びます。
カリキュラム
カリキュラム内容のご紹介
SECTION 01. Intro
01.講座の紹介
- 講師の紹介
- カリキュラムについて
- 使用プログラムの紹介
SECTION 02.ポートフォリオウェブサイトの制作:準備
02.ウェブサイトを制作する方法
- プラットフォーム、ビルダー、テンプレートを見る
- 状況に合わせた制作方法を学ぶ
03.ウェブサイトの企画とリサーチ
- 目的と方向性の設定
- ワイヤフレーム設計と印象的なキーワードの選択
- ウェブサイトの調査と分析
SECTION 03.ポートフォリオウェブサイトの制作:デザイン
04.Figmaで作るウェブサイトデザイン:Figma
- Figmaファイルの設定
- フレーム構造を理解する
- 基本及び主な機能を見る
05.Figmaで作るウェブサイトデザイン:デスクトップ1
- デスクトップの基本レイアウト、プロトタイプ設定
06.Figmaで作るウェブサイトデザイン:デスクトップ2
- デスクトップのメインページデザイン
07.Figmaで作るウェブサイトデザイン:デスクトップ3
- デスクトップ紹介ページデザイン
- デスクトップ詳細ページデザイン
08.Figmaで作るウェブサイトデザイン:モバイル1
- モバイル基本レイアウト、プロトタイプ設定
- モバイルメインページデザイン
09.Figmaで作るウェブサイトデザイン:モバイル2
- モバイル紹介ページデザイン
- モバイル詳細ページデザイン
- プロトタイプの詳細をアップロードする
SECTION 04.ポートフォリオウェブサイトの制作:実装
10.材料の準備
- ウェブサイトを実装するための設計資料の準備
- Lottie アニメーション制作プロセスを見る
11.作業環境の設定
- ローカルで WordPress の作業環境を設定する
- VSCodeの作業環境を設定する
12.ウェブサイトの構造を把握
- WordPressのテーマ構造を見る
- デザインとテーマ構造の比較
13.ウェブサイトの実装:パブリッシング1
- 基本ファイル構造の設定
- レスポンシブcssを理解する
- Header & Footerの設計
14.ウェブサイトの実装:パブリッシング2
- メインページhtmlデザイン #1
- メインページcssデザイン #1
15.ウェブサイトの実装:パブリッシング3
- メインページhtmlデザイン #2
- メインページcssデザイン #2
16.ウェブサイトの実装:パブリッシング4
- 紹介ページを追加する
- 紹介ページhtmlデザイン
- 紹介ページcssデザイン
17.ウェブサイトの実装:CMS1
- 詳細ページを追加する
- カスタムポストタイプの作成
18.ウェブサイトの実装:パブリッシング5
- 詳細ページhtmlデザイン
- 詳細ページcssデザイン
19.ウェブサイトの実装:CMS2
- メインページフィールドの設定とCMS接続
- 紹介ページフィールドの設定とCMS接続
- 詳細ページフィールドの設定とCMS接続
20.ウェブサイトの実装:CMS3
- 言語変更機能を追加する
- コンテンツをアップロードする
- 仕上げ設定
21.ウェブサイトの実装:ホスティング
- データのバックアップ
- ホスティング接続
SECTION 05. Outro
22.多様な活用法
- 異なる構造のウェブサイトを見る
- ポートフォリオメディア固有の管理方法を見る
- 完成したウェブサイトメディア別に加工する
*講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。
インタビュー
グラフィックデザイナー パク・ハヌル
本講座の重要なポイントは何ですか?
自分のポートフォリオを多角的に探索し、それに合わせて持続的で簡単なアップデート体系を設けている部分です。また、デザインから実装まで、ウェブサイトの制作に必要な全体のプロセスを幅広く経験することができるという点や、既製のテンプレートやテーマを使わず、デザイン自由度の高い実装方法を学習できることも重要なポイントだと思います。
講師の強みやメリットは何だと思いますか?
私は主にグラフィックデザイン作業をしてきましたが、偶然UIデザイナーとして働くようになり、機能に従う形に対する感覚を育てることができました。適度な使いやすさと適度な楽しさの、両方を兼ね備えたウェブサイトを最初から最後までデザインし、実装した経験が私の強みだと思います。Figmaを扱う目次で、適切な使いやすさと楽しさをコントロールするための、効率的で自由なウェブサイトのデザインプロセスを共有したいと思います。
本講座を通じて何を得ることができますか?
自分の作業過程と結果物を持続的にまとめて見せる習慣、そしてそれによって作られる自分だけのアーカイブを手に入れてほしいです。きちんと整理されたアーカイブは、直接的または間接的に役立つからです。さらに、ウェブサイトのデザインと実装は思ったほど難しくないし、面白いな、もっと学んでみようかな?という気持ちを少しでも持っていただけたら幸いです。
使用プログラムについてご案内します。
当講座は、以下のツールを使用します。
[メインツール]
- Figma Desktop App version 116.2.4
- Visual Studio Code 1.71.1
- MAMP 6.6
- FileZilla 3.56.0
※円滑な受講のため、最新バージョンのご使用を推奨します。
※すべてのソフトウェアは無料プログラムで最新バージョンのダウンロードが可能です。
