Webデザイナー必見!コーディングを気軽に練習できる無料Webサービスまとめ
2015年12月25日の記事を再編集しています。
現在、Webデザイナーには、デザインだけでなく、コーディング技術も期待されるようになっています。
コーディングを理解しないままでWebデザインを構築すると、実装不可能なものができ上がってしまう場合もあるため、コーディングに関する最低限の知識を持つことは前提となるケースが多く、Webデザイナーとして仕事をしていきたいのであれば、コーディングスキルは必須となるでしょう。
今回は、コーディングをゼロから初めたい方でも気軽に学べる日本語対応しているコーディング学習サービスをまとめました。
Webデザイナーを目指している方、Webデザイナーとしてスキルアップを担っている方は是非チェックしてみてください。
無料のコーディング学習サービス4選
1.Progate
http://prog-8.com/
ゲーム感覚でコードの基礎を学ぶことができる無料の学習サービスです。
HTMLの基本のコードを1つずつ実際に書きながら学べる実践的なプログラムが組まれています。設問ごとにわかりやすいヒントが設置されており、自分だけの力でコードの勉強ができるような工夫が施されています。
学習の進捗状況もわかりやすいため、モチベーションも維持しやすく、なかなかコーディングの勉強に時間が取れないという方は利用してみると良いでしょう。
2.ドットインストール
Web制作を行なっている方なら、一度は「ドットインストール」の名前を聞いた事があるのではないでしょうか。
プログラミング学習サービスとしては定番となりつつあるドットインストールでは、HTML、CSSやPHPやRubyなどのプログラム言語からWordpressの構築方法まで幅広い分野を扱っています。
3分間で完結する動画コンテンツで学習するスタイルなので、自分のペースで少しずつ進めることができるうえ、カテゴリも細分化されているので、「この部分だけ忘れたから復習したい」というような復習ツールとしても有用です。
3.Codeprep
Codeprepは、実際にプログラムコードを記述しながら学べるWebサービスです。
HTML、CSSからアプリ開発まで幅広くカテゴリが豊富なサイトであり、カテゴリの充実度で言うと1,2を争うほどのボリュームです。
すべてのカテゴリに「はじめての」と見出しがあるように、Web初心者にも入りやすいよう導線設計されているので、コーディングの知識がほとんど無い状態でも安心してスタートできるでしょう。
4.Schoo
無料のオンライン動画学習サイトである「Schoo」は、2015年2月に3.4億円の資金調達を実施しており、高校や中学校でも授業の一環として導入されるなど現在急速に成長しているサービスです。
コーディングやプログラミング、WebデザインなどのWeb制作関連カテゴリだけに留まらず、ビジネスやスタートアップ、マーケティングまで網羅しているため、自分で新しいサービスを立ち上げたいと考えている方にオススメです。
schooの最大の特徴として、「すべての授業を生放送配信している」点が挙げられます。
各業界で活躍されている方が講師として登壇しており、その場で質問することもできます。
参考:
動画学習サービスのスクー、既存株主とDDHなどから3.4億円の資金調達 | TechCrunch Japan
コーディングとは?
コーディングとは、プログラム言語をソースにコードを記述することを指します。code + ing でcoding(コーディング)と呼ばれます。
TOPページやバナーのデザインを作成しただけではホームページにはなり得ません。
そこに、「このテキストには外部リンクを設置する、このバナーにはこの内部リンクを設置する」等様々な指示を設置し、ホームページとして機能するようにするための作業が「コーディング」です。
具体的には、HTMLやCSSなどを仕様書に沿って形成していく作業がメインとなり、Web制作の現場では欠かせない工程です。
「プログラミング」とよく混同されていますが、意味合い的にはほぼ一緒ではあるものの、コードを書く作業のみを指す「コーディング」に対して、プログラミングは「プログラムの設計段階から携わり、仕様書作成やデバッグまで一貫して行う」という意味合いで使われる場合がほとんどです。
主にエンジニアが持つスキルですが、Webデザインにも大きな影響を及ぼすため、Webデザイナーも知っておくべき分野と言えるでしょう。
参考:
タグ・HTMLとは。ホームページの基礎技術|ferret
CSSの基本~スタイルシートとは|ferret
まとめ
Webデザイナーとして働く分には、コーディング関連の知識が無くても業務は行えます。
しかし、実装可能な使用を検討するためにエンジニアの方々との打ち合わせが多くなって工数がかかってしまったり、デザインとして取り入れられる技術(動的な要素等)の取り入れ方がわからず、訴求力が不十分になってしまうというのは非常にもったいないことです。
Webデザインは、ユーザーに対して情報をわかりやすく提示するための手段であり、コーディングもその一環です。
ユーザーに合ったデザインを考える際、選択肢は多ければ多いほど良いに越したことはなく、そのためにもWebデザイナーとしてコーディング技術を得ることは重要です。
このニュースを読んだあなたにおすすめ
Webマーケティングとは
Webマーケティングの基礎~3C分析を使ってみよう
マーケティングの基本である市場分析とポジション
このニュースに関連するカリキュラム
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- 導線
- 導線とは、買い物客が店内を見てまわる道順のことです。ホームページにおいては、ページ内での利用者の動きを指します。 ホームページの制作にあたっては、人間行動科学や心理学の視点を取り入れ、顧客のページ内での動きを把握した上でサイト設計を行い、レイアウトや演出等を決めることが重要になります。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- 外部リンク
- 外部リンクとは、別名被リンクとも呼ばれ、外部のWebページからの自分のWebページへのリンクのことで、SEOを考える上で重要な要素の一つです。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- 内部リンク
- 内部リンクとは、同一ドメインのサイト内に貼られたリンクのことを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング