Webを勉強中の方々へ
•Descargar como PPTX, PDF•
1 recomendación•1,041 vistas
2016/9/5に、札幌市内の某職業訓練校にて、Webデザインを勉強中の方々へ職業人講話としてお話させていただいた内容です。
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Webを勉強中の方々へ
Similar a Webを勉強中の方々へ (20)
Último
Último (12)
Webを勉強中の方々へ
- 1. Webを勉強中の方々へ
- 7. • 17歳：高校中退・世界一周へ • 帰国後、独学でHTMLを勉強。アフィリエイトサイトとか作って ました。（なお売り上げはry • 19歳：ワーホリでアイルランドへ。8ヶ月くらい住んでました。フ ァミコンゲームとかやってた。 • 帰国後、職業訓練校でWebデザインを勉強。 • ㈱IDEACD入社 • ㈱24-7入社 About
- 11. 事業紹介
- 13. こんなこともやってました
- 15. 24-7のサービス ラインナップ 企業様が抱えるWEB施策の「課題」を 総合的にご支援します。 { } WEBサイト 構築・制作 インバウンド マーケティング 導入・運用 オンサイト スタッフ派遣
- 16. 業界における24-7の立ち位置
- 17. 業界における24-7の立ち位置
- 19. 業界における24-7の立ち位置
- 20. 業界における24-7の立ち位置
- 21. Web制作における専門的なナレッジ CMSとしてのHubSpotの構築方法や、MAと絡めた設計、 テキストエディタのBrackets、CSSアーキテクチャ等 唯一無二のナレッジを保有しています。
- 23. 1.技術的な話
- 24. 技術的な話 • IE・Android問題の解消 • 静的サイトの減少・CMSの普及 • レスポンシブWebデザイン • 技術力の二極化 • 単価の下落
- 25. IE・Android問題の解消 ・IE6～7、Android2系はバグのパレード！ ・これだけで工数が1.5倍や2倍以上になることも！！ ・現在はサポートしないのが主流なため、 だいぶ楽になりました。。 IE・Android ＞ 静的サイトの減少 ＞ RWD ＞ 技術力の二極化 ＞ 単価の下落
- 26. 静的サイトの減少・CMSの普及 ・「ただ作るだけ」のWebサイトはあまりありません ・お客様がニュースを更新したり、ブログを書いたり ・CMSの普及・進化により、それがとても簡単に ・日本でよく使われるのはWordPress、Movable Type、 concrete 5、a-blog cmsあたりでしょうか IE・Android ＞ 静的サイトの減少 ＞ RWD ＞ 技術力の二極化 ＞ 単価の下落
- 27. レスポンシブWebデザイン IE・Android ＞ 静的サイトの減少 ＞ RWD ＞ 技術力の二極化 ＞ 単価の下落
- 28. レスポンシブWebデザイン IE・Android ＞ 静的サイトの減少 ＞ RWD ＞ 技術力の二極化 ＞ 単価の下落 https://csblogs.com/bloggers/coxlin
- 29. 技術力の二極化 ・今までのWebサイトは、あまり「動かなかった」 ・現在のWebサイトは「動き」を求められることが多い （アニメーション、ECサイト、Webアプリケーション） ・「動き」には少なからずプログラムの知識が必要なため、 できる人とできない人の差が顕著に IE・Android ＞ 静的サイトの減少 ＞ RWD ＞ 技術力の二極化 ＞ 単価の下落
- 30. 単価の下落 ・ツール（デザインツール、エディタ、CMS）の進化で、 Webサイトを作るのが比較的簡単になった ・プレーヤー（制作会社・フリーランス）が増え、 価格競争が始まる ・「技術力の二極化」がそのまま売上にも影響 （いかに他社と差別化するか？） IE・Android ＞ 静的サイトの減少 ＞ RWD ＞ 技術力の二極化 ＞ 単価の下落
- 31. 2.全体的な話
- 33. Webの拡大×アダプティブデザイン Webの拡大 ＞ スマホアプリ ＞ 誰でも何でも ＞ リモートワーク
- 34. Webの拡大×アダプティブデザイン Webの拡大 ＞ スマホアプリ ＞ 誰でも何でも ＞ リモートワーク
- 35. アダプティブデザインとは コンテキストに合わせて表示する内容を切り替え ・性別、年齢、職業などのユーザー情報 ・車に乗るのか、バスに乗るのか、電車を使うのか ・GPS、カメラ、マイク、温度計、加速度計などのセンサー Webの拡大 ＞ スマホアプリ ＞ 誰でも何でも ＞ リモートワーク http://dx.24-7.co.jp/adaptive-design-with-sesors/
- 36. Google Nowの例 Webの拡大 ＞ スマホアプリ ＞ 誰でも何でも ＞ リモートワーク
- 37. HTMLでスマホアプリを作れる HTML/CSS、JavaScriptでアプリを作れるツールが登場し、 既に実用されています。（スマホだけではありません） ・CORDOVA……モバイルアプリ向け ・Electron……デスクトップアプリ向け。 テキストエディタのAtomや Visual Studio Codeに使われています。 Webの拡大 ＞ スマホアプリ ＞ 誰でも何でも ＞ リモートワーク
- 38. アイデアと技術力で、誰でも何でもできる時代に AWSや様々なフレームワークの台頭で、 何かを作るための初期コストはかなり下落しています。 突出したアイデアと十分な技術を持っていれば、 1人からでも革新を起こすことができるでしょう。 逆に言えば戦乱の世です…… Webの拡大 ＞ スマホアプリ ＞ 誰でも何でも ＞ リモートワーク
- 39. リモートワーク 場所や時間に縛られず働きやすいのも、 Web業界の特長です。 きちんとした技術力と信頼、 コミュニケーション力があれば、自由な働き方が可能です。 弊社にも実際に在宅ママさんワーカーがいます。 Webの拡大 ＞ スマホアプリ ＞ 誰でも何でも ＞ リモートワーク
- 41. 第三部 Web業界に必要なスキル
- 42. デザイナーに必要なスキル
- 51. ・ UI/UXに対する理解 現行のデザインにパターンがあるのは、 数多くの解析から導き出した人間の特性に合わせているため。 ・デザイン思想に対する理解 Material Design、Atomic Design、etc… ・コーディングに対する理解 Extractに対する配慮やFont Awesomeの利用等。 デザインがコーディングに引きずられるべきでは無いと思いますが、 配慮されているデザインに遭遇すると、コーダーは飛んで喜びます。
- 52. コーダーに必要なスキル
- 70. まとめ
- 74. Webを楽しめますように。
Notas del editor
- 元々札幌のWeb制作会社として10年ほど前に創業 現在本社は東京、今年の2月に再度札幌支社を設置 シンガポールにもあります 全体で40人くらい
- インバウンドマーケティングという、コンテンツマーケティングの上位概念をメインに 分かりやすい例で言えばLIGさんとか オンサイトはR社に
- MAとは……サイトにお問い合わせしてくれた人を自動的に振り分け、判別し、その人に合わせたアプローチを実現するツール。 例えば検討中の人には、検討に役立つコンテンツの提供、購入まで一歩手前の人には、購入ボタンを大きく表示するなど HubSpotにおいては東アジア唯一のプラチナ、もうすぐダイアモンドと独走状態
- CMSとは……コンテンツ管理を行うためのシステム。多く用いられるのはWordPressのようなブログベースのCMS ECサイトとかにも使われる。全ページを手動で管理すると死んでしまう
- ワンソースで複数の解像度に最適化された表示を担保する手法 一応、フルイドイメージ・グリッド・メディアクエリの3つを使用していることが定義
- - なぜレスポンシブが主流になったかというと、こういうこと。 - この資料ですら2〜3年前くらい
- 「動く」はアニメーションするだけでなく、「コンテンツが更新される」も含む。2ｃｈとか。 常に同じページではなく、アクセスする度に新しい何かがあるということ
- 単価を上げる・維持するには高度化する流れについて行かなければならない。 既存の技術だけでやり続ける方法もあるが、薄利多売なビジネスモデルになりがち、どんどん辛くなってくる。 また、いわゆるAIやプログラムの自動化に取って代わられやすいのもこのレイヤー。 実際に弊社でも、数百ページを自動移管するプログラムが出てきた
- どうやって個人を特定するか？はMAと絡んでくる Siriのようなパーソナルアシスタントみたいな感じ。 検索する前に、結果を表示してくれる
- Androidの人います？Google Now使ったことある人います？ 自分の居場所によって、天気情報を表示 カレンダーを読み取って、自動的にいつまでに出発や、交通手段を提案してくれる
- iOSアプリは昔はObjective C、今はSwift AndroidはJava いずれも1つのサービスを作るのに、複数の言語でネイティブアプリを作るのでコストがかかる デスクトップアプリでも同様のことが実現できる HTML/CSSは「表示する」ということが得意なため、この流れは今後進んでくる。JSも今はサーバーサイドで動く。 もしくは、より超専門的なプログラミング言語が指向性を持って発達し続けるの2つ。中途半端な言語はあまり使われなくなる。
- AWSとは……アマゾンが提供しているクラウドサービス。Webサービス等の稼働に必要なシステムが小額から、数分ですぐ使える スケールアップやダウンも超カンタン→芸能人の炎上対策や、TV取材にも使われる サーバー界における革命 今まではアイデアがあっても、それを動かす環境を手に入れるのにお金や時間がかかっていた
- サイトを使うユーザーの年齢層・性別は？ このデザインでどうしたいの？お問い合わせアップ？売上アップ？ 1番大きな目的を意識する これをかっちりやってターゲットが見えてくると、デザインの方向性が決まってくる 角丸は柔らかさだったりモダンであったり、シャドウは強調だったり、グラデーションは高級感だったり、袋文字は強調だったりポップだったり……
- 職業人講話の時に言われた「商業デザイナー」という言葉が凄く頭に残っている 芸術だと思わないように むしろお客様の要望や感性が大前提にあるため、制限は凄く多い その中でいかにクリエイティブを発揮するか
- 私はデザイナーではないんでアレですが、それでもよくやります。 気になったものは写メってEvernoteに飛ばす。帰ってからなぜ気になったのか？を考える 今まで見えてなかったものが見えてくるので、日常が楽しくなります。ブログ脳と同じ。
- ボタンを一つとっても、どこにあるか？どんな色か？どんな大きさか？どんな文言か？で、クリック率は大きく変わってきます。 自分独自の感性・理論だけでは厳しいです。何故なら世界的に標準となる流行りがあるから。フラットデザインとか。（今はフラットにちょっと立体感を出すのが主流） 世界のとんでもなく凄い人、偉い人の考え方をフォローしましょう これはなんていうか、よくあるコーダー対デザイナー戦争みたいな…… 最終的に成果物を作るのはコーダーなので泣きを見るのはコーダーなんですが、お互い歩み寄りたいです
- これはパソコンの物理的な問題も同じです。 ネットに繋がらない→そもそもルータの電源入ってる？→Wifiちゃんととんでる？→Wifiにちゃんと接続できてる？→他のデバイスは問題ない？→他のサイトも見れない？等々……
- GitといえばGitHubのこと！ではなくて、Gitはあくまでも汎用的な技術です。 GitHubはそれにSNSを追加したサービスみたいな感じです。 Gitを使うにはまぁGitHubでも良いですし、Bitbucketとかも良いです。 クライアントはSourcetreeが良いです。
- 例えばタブでコンテンツが切り替わるとか、ホバーするとメニューが表示されるとか、クリックするとアコーディオンが展開されるとか まぁでもWordPressに関しては、 下手にカスタマイズから入るより本を買ってテーマ作ってみた方が早いです。HTML/CSSの理解がかなり進んだ1番最後に、余力があれば。 まずはHTML/CSSについてきちんと理解していることが大前提です。
- いくらでも時間があるなら、 誰でも成果物をあげることは出来ます。 限られた時間内に、きちんとしたクオリティで 成果物をあげるのがプロです。常に納期と戦っています。
- 「飲み会に出ろ、仲良くしろ」じゃないです。 作業に対する自分の認識をきちんと伝えられるか、 相手の認識をきちんと汲み取れるか、です。 これができないと工数がどこまでも肥大化します。 本当に重要なスキルです。
- 社内の人からお客様まで、たくさんの人と関わる仕事です。 自分がベストだと思っても、プロジェクトに とってベストではないことが多々あります。 自信過剰にも卑屈にもなり過ぎず、 「自分を信じることと同じくらい、自分を疑う」 という姿勢を持ち続けるのはとても重要です。
- IT業界の中でもWebのフロントは特に変化の早い分野です。 去年覚えたことが今は使えないことも多々あります。 ゴールはありません。常に勉強し、変化し続けなければなりません。 だからこそ、「変化しない部分」を見極めて身に付けることもとても重要です。
- - Webというのは少し特殊なもので、全ての業種・全ての人間がクライアントになり得る→色んな出会いや発見がある - スマートデバイス/IOTの普及で、日常システムの大部分はWebによって支えられる（これはフロントエンドだけでなく、バックエンドやWebアプリケーションも含む） - 大部分がWebに支えられる時代に、Webに精通していることはこれ以上ないアドバンテージだよね？アイデアとそれなりの技術を持っていれば、誰でもブレイクスルーを実現できる時代に - 常に変化があって、イノベーションを起こしている人も周りにいて、純粋に楽しいから！（結局自分が今やっているのは、そのための準備期間みたいなもの）
- - Webというのは少し特殊なもので、全ての業種・全ての人間がクライアントになり得る→色んな出会いや発見がある - スマートデバイス/IOTの普及で、日常システムの大部分はWebによって支えられる（これはフロントエンドだけでなく、バックエンドやWebアプリケーションも含む） - 大部分がWebに支えられる時代に、Webに精通していることはこれ以上ないアドバンテージだよね？アイデアとそれなりの技術を持っていれば、誰でもブレイクスルーを実現できる時代に - 常に変化があって、イノベーションを起こしている人も周りにいて、純粋に楽しいから！（結局自分が今やっているのは、そのための準備期間みたいなもの）
- - Webというのは少し特殊なもので、全ての業種・全ての人間がクライアントになり得る→色んな出会いや発見がある - スマートデバイス/IOTの普及で、日常システムの大部分はWebによって支えられる（これはフロントエンドだけでなく、バックエンドやWebアプリケーションも含む） - 大部分がWebに支えられる時代に、Webに精通していることはこれ以上ないアドバンテージだよね？アイデアとそれなりの技術を持っていれば、誰でもブレイクスルーを実現できる時代に - 常に変化があって、イノベーションを起こしている人も周りにいて、純粋に楽しいから！（結局自分が今やっているのは、そのための準備期間みたいなもの）