Enviar pesquisa
Carregar
作品は誰かに見てもらった方が良い!
•
2 gostaram
•
916 visualizações
Makiko M
Seguir
・なぜポートフォリオを作ったのか? ・実際の制作の流れ ・レビューをしてもらった ・デザイン編 ・コード(HTML)編 ・コード(CSS)編 まとめ
Leia menos
Leia mais
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 33
Baixar agora
Baixar para ler offline
Recomendados
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
Yuma Tahara
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
Mariko Imamura
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
eriko yamada
プロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよ
Yoshiki Kojima
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
Yuki Suzuki
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けよう
Masayuki Abe
Recomendados
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
Yuma Tahara
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
Mariko Imamura
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
eriko yamada
プロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよ
Yoshiki Kojima
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
Yuki Suzuki
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けよう
Masayuki Abe
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
WordCamp Tokyo2016-WooCommerceのすすめ
WordCamp Tokyo2016-WooCommerceのすすめ
Kei Tamura
実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014
Masayuki Maekawa
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
schoowebcampus
プログラミングTipsサイトlt(town bash 201710)
プログラミングTipsサイトlt(town bash 201710)
Ryosuke Miyahara
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
schoowebcampus
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
スタイルガイドを活用した運用に強いCMSサイト制作
スタイルガイドを活用した運用に強いCMSサイト制作
Keisuke Imura
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
WordBench京都9月号
WordBench京都9月号
Koji Asaga
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
はたしてHTML5でご飯は食べれるのか。
はたしてHTML5でご飯は食べれるのか。
Yachiyo Suzuki
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
Yu Morita
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
初めてのConcrete5
初めてのConcrete5
Nobuko Kodera
Mais conteúdo relacionado
Mais procurados
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
WordCamp Tokyo2016-WooCommerceのすすめ
WordCamp Tokyo2016-WooCommerceのすすめ
Kei Tamura
実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014
Masayuki Maekawa
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
schoowebcampus
プログラミングTipsサイトlt(town bash 201710)
プログラミングTipsサイトlt(town bash 201710)
Ryosuke Miyahara
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
schoowebcampus
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
スタイルガイドを活用した運用に強いCMSサイト制作
スタイルガイドを活用した運用に強いCMSサイト制作
Keisuke Imura
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
WordBench京都9月号
WordBench京都9月号
Koji Asaga
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
はたしてHTML5でご飯は食べれるのか。
はたしてHTML5でご飯は食べれるのか。
Yachiyo Suzuki
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
Yu Morita
Mais procurados
(20)
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
WordCamp Tokyo2016-WooCommerceのすすめ
WordCamp Tokyo2016-WooCommerceのすすめ
実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
プログラミングTipsサイトlt(town bash 201710)
プログラミングTipsサイトlt(town bash 201710)
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
WooCommerce & AWS
WooCommerce & AWS
MF GeeksNight pplogの話
MF GeeksNight pplogの話
スタイルガイドを活用した運用に強いCMSサイト制作
スタイルガイドを活用した運用に強いCMSサイト制作
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
WordBench京都9月号
WordBench京都9月号
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
はたしてHTML5でご飯は食べれるのか。
はたしてHTML5でご飯は食べれるのか。
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
Semelhante a 作品は誰かに見てもらった方が良い!
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
初めてのConcrete5
初めてのConcrete5
Nobuko Kodera
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
Kyo Kaji
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
デザインに騙されないデザイン
デザインに騙されないデザイン
Gyoda Nawoshi
ガチリアルな修羅チーム開発
ガチリアルな修羅チーム開発
Atsushi Kojima
Espruinoの紹介
Espruinoの紹介
Masakazu Muraoka
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
Roo
Roo
terahide
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
おばかアプリ勉強会資料 シグマコンサルティング
おばかアプリ勉強会資料 シグマコンサルティング
atmarkit
141219 まにフェス
141219 まにフェス
rie05
要求開発 with You
要求開発 with You
Haruo Sato
感情から読み解くデザインプロセス
感情から読み解くデザインプロセス
Tomofumi Ueba
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
WordPressセキュリティ対策ど~してる?
WordPressセキュリティ対策ど~してる?
Toyohiko Asai
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
Kenta Nakamura
Semelhante a 作品は誰かに見てもらった方が良い!
(20)
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
初めてのConcrete5
初めてのConcrete5
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
デザインに騙されないデザイン
デザインに騙されないデザイン
ガチリアルな修羅チーム開発
ガチリアルな修羅チーム開発
Espruinoの紹介
Espruinoの紹介
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Roo
Roo
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
おばかアプリ勉強会資料 シグマコンサルティング
おばかアプリ勉強会資料 シグマコンサルティング
141219 まにフェス
141219 まにフェス
要求開発 with You
要求開発 with You
感情から読み解くデザインプロセス
感情から読み解くデザインプロセス
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
WordPressセキュリティ対策ど~してる?
WordPressセキュリティ対策ど~してる?
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
Último
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
koheioishi1
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ssusere0a682
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
Tokyo Institute of Technology
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
Takayuki Itoh
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
YukiTerazawa
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
Kochi Eng Camp
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
Tokyo Institute of Technology
Último
(7)
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
作品は誰かに見てもらった方が良い!
1.
作品は 誰かに 見てもらった方が良い!
ひよっこWebディレクターが、 初めて作ったポートフォリオをレビューしてもらったお話
2.
自己紹介 ひだまきこ(@makiko_ol) ザ・マーズナレッジトレーニング生 第1号
2013年 元道産子。 2013年 11月、都会島に上陸したひよっこWebディレクター。 ! WP-Eにて共同執筆中。現在最多執筆者とか。 Schooにて司会もしたりしています。 ! 【スペック】 Illustrator/Photoshop/HTML/CSS・・・少々
3.
本日のアジェンダ ❖ なぜポートフォリオを作ったのか?
❖ 実際の制作の流れ ❖ レビューをしてもらった ❖ デザイン編 ❖ コード(HTML)編 ❖ コード(CSS)編 ❖ まとめ
4.
なぜポートフォリオを作ったの? ❖ Illustrator
❖ Photoshop ❖ Bootstrap ❖ HTML ❖ CSS ❖ jQuery
5.
実際に作成した流れ ❖ 1.Bootstrapでワイヤーフレームを作る
(1ヶ月14時間位) ❖ 2.Photoshopでデザインカンプを作る (10日間10時間位) ❖ 3.コーディング(HTML/CSS)する (5日間7時間位) 23% 32% 45%
6.
出来上がった 私のポートフォリオ
7.
Photoshop Illustrator Bootstrap
8.
レビューしてもらって 出来上がったポートフォリオ
9.
レビュー後、できあがったデザインカンプ
10.
本日のアジェンダ ❖ なぜポートフォリオを作ったのか?
❖ 実際の制作の流れ ❖ レビューをしてもらった ❖ デザイン編 ❖ コード(HTML)編 ❖ コード(CSS)編 ❖ まとめ 3要素!!
11.
デザイン編
12.
デザイン編 1/4 自己分析 自己紹介文をとことん考える
あなたはどんな人? コンセプトは?? どんな風になりたい??? もっと自分をアピールした方がいいとのこと
13.
レビュー後、できあがったデザインカンプ
14.
デザイン編 2/4 ロゴが見づらい ロゴは文字を見易く、大きく
タイトルが分かるようにするべき! 分解して色を 変えてみる! 字体を部分的に 変えてみる
15.
レビュー後、できあがったデザインカンプ
16.
デザイン編 3/4 フォントは2種類まで! ②重要なところを
① 全部、同じ書体で ピックアップ フォントを決める時は ③字体を変えたり 大きさを変えたり
17.
レビュー後、できあがったデザインカンプ
18.
デザイン編 4/4 メイン画像はレスポンシブに対応! 横幅は1500px
背景の両端はぼ かす!
19.
レビュー後、できあがったデザインカンプ
20.
デザイン編 ポイント ❖
ミスと意図的をしっかりと区別! ❖ まずは白黒で違いをつける。
21.
コード(HTML)編
22.
コード(HTML)編 1/3 見出し h1は1つのドキュメントに
1コだけ section 話題で変わる ! div(dividers) レイアウトを変える
23.
コード(HTML)編 2/3 代替テキスト altは日本語でもOK
altは必ず入れる! 日本語でもOK!
24.
コード(HTML)編 3/3 idとclass idは
JSの操作の時に使用 classは 見た目変更に使用
25.
コード(CSS)編
26.
コード(CSS)編 1/2 ショートハンド 同じ要素は,(カンマ)で
まとめる
27.
コード(CSS)編 2/2 ページ全体にかかるモノはbodyに 下に書けば書くほど
上書きされる
28.
お土産 ❖ logo
pond(http://logopond.com/) ❖ flat icon(http://www.flaticon.com/) ❖ ONE PAGE LOVE(http://onepagelove.com/) ! ❖ HTML5 Outliner(https://gsnedders.html5.org/outliner/) ❖ HTML5.jp(http://html5.jp/) ! ❖ stack overflow(http://stackoverflow.com/) ❖ メンテナブルCSS(https://www.cyberagent.co.jp/recruit/techreport/report/id=7926) ❖ コーディングガイドライン(http://met.hanatoweb.jp/guideline/html5/)
29.
まとめ 誰かに見てもらって色々と意見を 言ってもらった方がいい!
30.
まとめ 実務を持っている人なら 的確なアドバイスがもらえるので
スキルアップに繋がる
31.
まとめ クライアントや業界外の友達なら 率直な意見がもらえる
論理的な説明の スキルアップに繋がる
32.
まとめ https://www.timeticket.jp/items/5355
33.
ご清聴ありがとうございました
Baixar agora