HTML&CSS – Back Pack Hack-デジタルノマド・キラのブログ

【384人の講習実績】東京で、ホームページ作成（WordPress）Campの講師をしてきました

キラ＠デジタルノマドラボ — Tue, 27 Jun 2017 03:43:46 +0000

WordPress Campの講師をしてきました

こんにちは、キラです。

６月の２４日と２５日、東京にて、ホームページ作成（WordPress）Campの講師をしてきました。

今までこれについて全然書いていなかったので、今回はこの報告などについて書いていこうかと。

ホームページ作成（WordPress）Campとは？

WordPress Campとは、僕が講師をお受けしている仕事の一つです。

主催は、起業家支援を行っている、社団法人festivo。

若手起業家コミュfestivo

festivoは、30代以下の若手が85%を占める、一般社団法人festivoが運営する国内最大の起業家コミュニティです。（中略）

festivoに参加する皆様が、ビジネス上の付き合いだけではなく、ステークホルダーを超えた関係を構築し、ビジネスとは人と人との信頼の上に成り立つことを再認識し、交流から真の信頼関係に基づいた商流を生むような、全国的な起業家の為のネットワーク作りを目指して参ります。

引用：festivo.org

という感じで、起業家向けに、人脈や経験のシェアの他、具体的スキルを付けるための講習も行っているワケです。

そして、その非常勤講師のひとりとして僕も居る、というわけです。

こちらが、今回のイベントのページ。↓

6/24(土)~25(日)festivo ホームページ作成（WordPress） Camp@東京【学生12,000円、一般15,000円】～戦うスキルを身につける15時間！WordPress集中合宿！～

会場は起業家シェアハウス

会場は、x-gardenで行いました。

起業家の集うシェアハウス「x-garden桜台」桜台駅徒歩10分

こちらは、コンセプトシェアハウスの運営を行っている、株式会社彩ファクトリーのシェアハウスの一つですね。

株式会社彩ファクトリー | コンセプトシェアハウスの企画・運営

起業家がいっぱい住んでいる場所なので、セミナールームなども完備しています。

今まで、様々な会場で実施してきましたが、現在東京ではココで実施することがほとんどです。

どんな内容をやるの？

この講座では、土日の２日間、みっちり１５時間使って、

ほぼ素人の状態から、WordPressを使ったウェブサイト、ブログ作成ができるようになるトコロまで持っていきます。

開催回数は、今回で２４回目。

一人ひとりの質問も受けたり、一緒にPCを触っていきながらの対面講座なので、一度に教えられる人数は２０名以下で限定していますが、

それでも、既に３８４名の方が受けてくださってます。

地味に、実績としてちょっと凄くなってきましたw

具体的なカリキュラム

具体的には、以下のような内容を実施しています。

１日目

ウェブサイト＆ブログはどうやってできているのか
WordPressとは何か
サーバーの設定
ドメインの設定
サーバーとドメインの紐付け
WordPressのインストール
ダッシュボードへのログイン
はじめての投稿
いろんな文章のスタイリング
本文に画像を挿入
アイキャッチ（サムネイル）画像付きの投稿
「テーマ」「テンプレート」をインストールと有効化
サイトタイトルの考え方と設定
サイトカラーの考え方と設定
ロゴとファビコンの変更
固定ページの作成
メニューの作成（固定ページから、リンクから、カテゴリから、階層化）
「プラグイン」を使ってお問い合わせフォームを作成
「ビジュアル」と「テキスト」の切り替え（HTMLでYoutube動画＆Instagram写真を挿入）
ショートコードを使って地図などを作成
記事に見出しと目次を作成

２日目

画像の軽量化
FBページをHTMLで挿入
CSSで表のスタイリング
CSSでトップ画像の横幅を変更
セキュリティ、サイト高速化などのプラグイン導入
Googleアナリティクスの導入とアクセス解析
WordPressのSEO設定
ネット広告（アドセンス、アフィリエイト）について

講習の合間のミニコラム

タッチタイプの覚え方
正しい検索の方法について
制作に便利なサイトやサービス、アプリの紹介

などなど。こうやって書くと、かなりボリュームありますね。

もちろん、会ごとの人数やリテラシーの高さによって、アドリブで内容は変えたり微調整したりしますが。

なんでやってるの？

僕自身が、こちらの仕事を継続して行っている理由は以下の３点です。

１，シンプルに、仕事として継続したいから

まあ、まずはこれですね。

自分のスキルに対しての需要があって、それを提供する対価として、しっかりお金を頂く、と。シンプルです。

そしてそれを、地味だけどしっかり継続しています。

もちろんこれは、協業してくださっている方々はもちろん、参加者の方々が居て初めて継続できることです。心より、感謝致します。

２，教えることで自分のスキルも高まるから

これは、やってみてわかったことでした。

人に教えまくることで、自分の「制作スキル」が上がるのはもちろん、「教えるスキル」も抜群に上がりますね。

また、そのコミュニケーションを通して、

「人が、何が分からないと思っているのか、何を欲しがっているのか」も分かるので、

当ブログで書く内容などもブラッシュアップされていきます。

３，festivo代表理事が好きだから（笑）

個人的な内容です（笑）

この講座が始まったキッカケは、festivo代表理事の塚本氏と個人的に繋がったことなのですが、

彼が好きだから続いてる、という部分は間違いなくありますww

仕事は、「何を」「どうやるか」以上に「誰とやるか」もとても大事ですね。

そしてもちろん、講習に参加される方との繋がりもでき、人生が豊かになっていくな、とも感じています。

参加者の声

今回の講座に参加された方々から寄せられたメッセージです。全て、本文まま。

吉良先生の明るく楽しく分かりやすい講座の中で、WordPressに全く触れたことが無かった私ですが、Webの形を整えることが出来ました（＾＾）

完全初心者の私が、ここまでできるようになって、すごく楽しめたのは、吉良先生のおかげです(* ´ ω ` *)

この講座は「一言で自分にとっては最高の講座」でした。

2日間かけて、WORDPRESSについての基礎やSEO対策までしっかりと掴むことができました。学習のペースも丁度良く、不明な点があってもその都度丁寧に教えて頂けたので最高でした。

そして、今後もこの講座に参加した人達との繋がりを大切にしていこうと思います。

私は、この講義を受けるまで、ホームページ作成はおろか、ブログもやっていない、パソコンの講義の4日前に購入した…という完全初心者でした。笑

不安でいっぱいでしたが、先生の教え方がすごく分かりやすく、こんな私でも、作成することができました！！
また、講義後も受講者同士で情報交換したり、先生がSNSで教えてくれたりなど、アフターフォローも万全です！
ですので、何かを初めてみたい、1人で出来るか不安、という方にはとってもオススメです！

べた褒めされると嬉しいですねww

次回は８月

で、次回は８月に東京でやります。

日本で、新しいカメラと三脚の購入、そしてドローンのメンテナンスをしている間にww

興味のある方は参加してみてください。

8/5(土)~6(日)festivo ホームページ作成（WordPress） Camp@東京【学生12,000円、一般15,000円】～戦うスキルを身につける15時間！WordPress集中合宿！～

２９日はSchooのHTML＆CSS講座も

ちなみに、今月末２９日１９時より、オンライン動画学習サービスのスクーで、HTML＆CSSの授業もやります。

ぜひ、見てみてください。

こちらの授業の続編ですね。↓

Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】

具体的な活動報告についても、全部を書くことは難しいですが、しっかりと書いていきたいなー、と思いますね。面倒くさいけどw

それでは明日も、よい人生とよい旅を。

Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】

キラ＠デジタルノマドラボ — Wed, 31 May 2017 21:11:37 +0000

HTMLに一切触れたことがない初心者のための60分

先日、株式会社スクーさんに出演依頼を頂いていた、

「HTMLに一切触れたことがない初心者のための60分」の生放送授業が、無事終わりました。

内容は以下のとおり↓

schooのライブ授業に出演します

今回教えた内容

今回は、全くの初心者を対象に、「HTMLとは何か？」から始まり、

基本的なタグ等を中心に「始めてのHTML」を書いてみて「おお、なるほどね楽しい」と終わることを目標としました。

実際やってみると、意外と時間押し押しで、一部「次回に続く」になりましたが！

作成するページ

６０分で、こんな感じの、各自簡単な自己紹介作ってみよう！というのを目標としました。

書くコード

用意したHTMLコードはこんな感じ。

けっこうなボリュームにも見えますが、動画をコピペで挿入したりする所もあるので、かなり初心者向けです。

基本的かつ、理解しやすいタグを中心に教えていきます。



  
    
    
    schooではじめてのHTML
    
    
  
  
	
		自己紹介ページ
	
	
	    基本プロフィール
		    
		    
		    吉良　光（きらこう）
		    

		    世界中を旅して、GoProとドローンで映像を撮っています。
		    

		    世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。
		    

		    旅とテクノロジーのブログ「BackPackHack」も書いています。
		    
		 世界一周の旅に持っていったドローン「Mavic Pro」
		    
		 
		 「TR1P（トリップ）」の動画の一例

		
		
		
			
		
		
			
		
		
			
		
		
		
		
			
		
		
			
		
		
		    
		
		
		
	
    
    	このサイトは、KOH_KIRAによって運営されています。

CSSはこんな感じ。今回はHTMLメインなので、CSSはその仕組みだけ触りました。

p{color: blue;}
body{background: #F0F8FF;
     text-align: center;
     }

講習内容のテキスト全文はコチラから。↓

ゼロからマスターするHTML/CSS ・HTMLってなんだ？ HTMLは、Hyer Text Markup Langageの略です。プログラミング言語ではないけれど、（ひらたく言えば）ウェブサイトなどを作るために必要な言語です。「Markup」というのは、直訳すると「印を付ける」みたいな意味で、HTMLは「この文章のここはこういう意味だよ！」という「構造」を定義するわけです。 HTMLは、サイトの「構造」を定義して、CSSは「見た目」を定義します。「何を載せるか」を決めるのがHTML、「どう見せるか」を決めるのがCSS、という感じでしょうか。・今日つくりたいページを見てみよう今回は、皆さんに簡単な自己紹介ページを作ってもらうことで、基本的なHTMLタグや、簡単なCSSについて触れていこうと思います。・HTMLの例を見てみようあるサイトを開いて「ページのソースを表示」をクリックすると、そのウェブサイトのHTMLが見られます。初見では難しいかもしれないけど、このギザギザの記号を覚えていくことで、ウェブサイトが作れるようになるのです。・必要なツールを用意しよう HTMLを学習する上で、必要なツールは２つ。そして今回だけ利用するひとつ。１，ブラウザ→今回は「Google Chrome」を使います。他のものでも問題無いかと思いますが、IEだけはやめておいてください（笑）２，テキストエディタ→今回は「Sublime Text」を使います。３，自己紹介に使えそうな画像や文章→フンワリと用意しておいてください。・HTMLの基礎ータグと属性 HTMLの基礎の基礎！「タグ」と「属性」という言葉を覚えましょう。 HTMLは、基本的に「文章に”構造的な意味”をつける」言語です。ホームページの中で、「ここはタイトルなんだよ」とか「検索結果に出したいのはここだよ」とか「ここは引用文なんだよ」とか。 <タグ>文章これが、基本的なタグの付け方です。そして、そこにさらに、何らかの属性を付けたい場合があります。そんな時は <タグ属性名=値>文章と入れてあげる必要があります。・属性とタグの、実際の例ちょっとわかりにくいので、例をあげます。 Hello World を、

Hello World

で囲むと、「この部分は”文章”なんだよ」という意味になります。（pは「Paragraph（段落）」のpです。）

Hello World

と書いたりすると、「このpで囲んだ部分は、文章で、文字の大きさは16ピクセルなんだよ」という意味になります。このような、タグと属性の基礎を押さえていくことが、HTML/CSSの基礎になります。・はじめてのHTML 新しいファイルを開いて、と書いてみてください。次に、その中にheadタグとbodyタグを書き込みます。これで、「今からHTMLの文章を作るよ」「言語設定は日本語だよ」「ここが基本情報（head）で、ここが（実際に表示される）body部分だよ」と書き込む準備が出来たワケです。タグで囲まれた内容は、「htmlファイルの情報」を宣言するものです。タグの中の内容は、タグを除いて普通はブラウザの画面上に表示されません。で、実際にウェブサイトに表示される内容が<body>タグ内の内容、というワケです。次に、headタグ内にmeta charsetとtitleを入れてみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>schooではじめてのHTML （メタキャラセット）とは、「文字の種類」を定義しています。文字化けなどをしないようにするための設定ですね。 Shift_JISとかもあるんですが、一般的にはこのutf-8を使うことが多いです。とりあえず入力しておきましょう。 titleタグは、そのまんま、「このウェブサイトのタイトルはこれだよ」と定義してあげるタグですね。次に、bodyタグの中に、以下のように文字を入れてみましょう。 schooではじめてのHTML

はじめてのHTMLだよ！

ここまでできたら、ファイルを保存してみましょう。上の「File」から「Save」か、command（control）+Sを押して保存してみましょう。保存名は「index.html」で。・ブラウザに表示してみよう保存したファイルを、ブラウザにドラッグ＆ドロップしてみましょう。すると、タブの部分にtitleタグ、本文内にpタグの内容がそれぞれ、出てきました！「ページのソースを表示」で見てみると、あなたの書いたHTMLが出てきます。 ※ここまででつまづいてしまっている人にありがちなのは、文字のつづりの間違いや、スペース（空白）の全角/半角が間違っている場合などです。チェックしてみましょう。・HTMLを使って動画を挿入してみようここまでやって「全くおもしろくない…」と思った方も、一部いるかもしれません。（僕も最初思ってました　笑）ここでちょっとだけ「おおー」となってもらうために、ちょっとだけ遊びましょう。 youtubeの動画を開いてください。新しい動画を開いたら、「共有」から「埋め込みコード」を選択。その内容をコピーして、bodyの間に入れてみてください。ファイルを改めて保存して、ブラウザを更新すると、動画がでてきます。 …ちょっとだけ、テンション上がるでしょ？

動画を埋め込んでみよう！

という感じに、コメントも入れてみましょう。これと同じやり方で、Twitterやフェイスブックページなども埋め込んだりできるワケですね。・よく使うタグよく使うタグとして、descriptionタグなどがあります。これは、検索結果などに表示される内容なので、正確に入力する必要があります。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

・styleタグを使ってみる（はじめてのCSS） body内に、CSSを書いて見た目を変えられる、styleタグを使ってみましょう。 bodyの中に　　を書き込んでみましょう。全体はこうなります。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

　　すると…文字の色が青くなります。・CSSファイルを分けるただ、このstyleタグ、次第にとっても長くなっていく上に、大量のページに同じものを書いたり修正したりするのが大変になってきます。なので、冒頭で述べたように、HTMLファイルとCSSファイルという形で分けて、 head内には、「このCSSファイルを参照するよ！」とだけ書いておくようにします。まずは、さきほどの　p{color: blue}　の部分を切り取って、新しくファイルを作り（command+N）、新しいファイル内に貼り付けます。そのファイルに「mystyle.css」という名前をつけて、index.htmlと同じ場所に保存しましょう。次に、head内に、以下の内容を書き込みます。全体としてはこうなります。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

link rel="stylesheet"は、「別ファイルのスタイルシートを呼び出すよ」という意味で、 href="mystyle.css"は、「mystyle.cssという名前のCSSファイルを呼び出すよ」という意味。そして、mystyle.cssに書かれている　p{color: blue}が、index.htmlに適用されるようになるので、結果的に、head内に p{color: blue}を書いたときと同じように、表示されるのです。これがCSSです。サイトの見た目を決めるものですね。基本的な書き方はセレクタ{プロパティ名: 値;} という書き方をします。「この部分について、見た目のココを、こうするよ」という感じでしょうか。「:」は「コロン」「;」は「セミコロン」といって、ちょっと似ていて間違いやすいので、気をつけましょう！ CSSは、これを部分ごとに沢山書いていくだけです。セレクタ{プロパティ名: 値;} セレクタ{プロパティ名: 値;} セレクタ{プロパティ名: 値;} という風に並んでいきます。セレクタ{プロパティ名: 値; プロパティ名: 値;} という風に、一つの項目内に複数のプロパティを並べることも多いです。「見出しについては、文字の色はこう、フォントの種類はこう」という風に。・もうちょっとだけ練習ついでに、mystyle.cssに body{background: #F0F8FF;} とも書き込んでみましょう。これで、背景の色も変わったハズです。このように、カラーはその名前の他、カラーナンバーやRGB値でも指定することができます。さらには、 body{background: #F0F8FF; text-align: center; } という内容もその後に書き込んでみましょう。これで、文章全体が真ん中にきました。このように、CSSとは、サイトの「見た目」を決定する、ということがわかればOKです！・コメントを書き込んでみると書き込むことで、HTML内に好きなコメントを残したりすることができます。せっかくなので、さきほどのHTMLにと書いて、学習メモを残してみましょう。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

このコメントは、自分用のメモの他、人とコードを共有する際のメモ書きとして、また、で囲むことで「消したくはない部分を無効化」したりするのにも使います。 ※このコメント部分も、ソースを表示すると、見ることができてしまうので、機密情報や変なことは書かないようにしましょう！ちなみに、CSSのコメントは /*コメント*/ という風に書くことができます。・セクションタグを使ってみようここまでが、HTMLの基礎です。次は実際に、ちょっとしたページを作りながら、いろんなタグを使ってみましょう。今回僕は、自己紹介のページを作ってみようと思います。 HTMLのタグはたくさんあるのですが、今回は（時間も短いので）できるだけシンプル、かつ分かりやすいタグを優先して使っていきましょう。・headerタグと見出し

…

タグ最もよく使われるセクションタグの一つが
タグです。これは、その名の通り、ウェブサイトのヘッダー（頭）の部分に使われます。ウェブサイトのタイトルやロゴ、メニューの部分ですね。の下に

と書いてみましょう。そして、この中にまた書き込みをすると、それがサイトのヘッダーに表示されるわけです。今回はここに
自己紹介ページ
と入れてみました。（
はじめてのHTMLだよ！
　は、消しておきました）
は「見出し１」という意味です。文字を”見出し”として目立たせる時に使います。 h1からh6まで使うことができます。そして、それぞれの見出しにCSSでデザインを割り当てて、文字の大小や周りの色などを調整したりもできます。見出しの例としては、スタイリングして分かりやすくしたこちらを見てみましょう。
マレーシア、クアラルンプールのシンボル「ペトロナス・ツインタワー」を１分で旅しよう
ついでに、
動画を埋め込んでみよう！
の部分も、
世界一周の旅に持っていったドローン「Mavic Pro」
と変えてみました。見出しになります。・footerタグ footerタグも、最もよく使われるセクションタグの一つです。ウェブサイトの一番下に、情報などを載せるタグですね。
このサイトは、KOH_KIRAによって運営されています。
などと、入れてみましょう。これで、全体としては schooではじめてのHTML

自己紹介ページ

このサイトは、@KOH_KIRAによって運営されています。

動画を埋め込んでみよう！
こんな風になり、ヘッダーとフッターができた形になりました。これ以外にも、sectionやarticleなどの細かいセクションタグがあるのですが、ちょっと長くなるのと、今回は使わないので割愛します。・imgタグで画像を入れてみようヘッダーとフッターができたら、次はその間に本文を入れてみましょう。
基本プロフィール
を入れてみます。画像は、index.htmlと同じ場所に入っている画像の名前を、指定してみてください。このままだとデカすぎたりするので、　　　　　width="200" height="200" をimageタグ内に追加して、画像の大きさを指定します。・改行のbrタグ画像を入れることができたら、その下に簡単な自己紹介を入れてみましょう。　　　　　　　
吉良　光（きらこう）世界を旅する１分動画「TR1P（トリップ）を作っています。世界中を旅して、GoProとドローンで映像を撮っています。旅とテクノロジーのブログ「BackPackHack」も書いています。
これだけだと、文章が全て続いた状態で表示されてしまうので、
タグで、「改行」をしてみましょう。
きらこう
世界中を旅して、GoProとドローンで映像を撮っています。
世界一周をしながら、を旅する１分動画「TR1P（トリップ）を作りました。
旅とテクノロジーのブログ「BackPackHack」も書いています。
このbrタグには、閉じタグはありません。ここまでで、全体では、こうなりました。 schooではじめてのHTML

自己紹介ページ

基本プロフィール

吉良　光（きらこう）
世界中を旅して、GoProとドローンで映像を撮っています。
世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。
旅とテクノロジーのブログ「BackPackHack」も書いています。

世界一周の旅に持っていったドローン「Mavic Pro」

このサイトは、@KOH_KIRAによって運営されています。
・aタグでリンクを設定しようよく使うタグの一つとして、文章や画像に「リンク」を入れられるaタグというものがあります。今回は、先程の文の中に、リンクを貼ってみましょう。まずは、飛ばしたい先のリンクを用意します。世界を旅する１分動画「TR1P」　https://www.facebook.com/gotr1p/ BackPackHack https://kohkira.com/ そして、リンクを入れたい文字を、それぞれこのように囲みます。世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。旅とテクノロジーのブログ「BackPackHack」も書いています。これで、リンク付きの文章が出来上がりました。さらに、最初のリンクだけ、「新しいタブで開くリンク」にしてみましょう。 a href=""の後に target="_blank" を書き足すだけです。こんな風になりました。世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。これで、最初のリンクだけ、新しいタブで開くようになりました。試してみてください。・tableタグを使って、項目を並べてみよう次に、tableタグを使って、６つの項目を表のようにキッチリ並べてみましょう。動画の下あたりに

データ1-1 データ1-2 データ1-3

データ2-1 データ2-2 データ2-3
と書き込んでみてください。更新すると、６つに別れた表が出てくると思います。これは、tableタグというものを使って、表を作ったワケです。は「ここから行が始まるよ」は「ここから列が始まるよ」という意味。じーっと眺めて考えると、なんとなく見えてくるんじゃないかと思います。・tableの各項目に動画を入れてみようこの、tableタグで作った表の中に、文章以外の項目を入れることも可能です。ここには、文章でも画像でも、何を入れても構いません。あくまでtableタグの練習なので、僕は、先ほどと同じように、動画を入れてみることにしました。特に入れたいモノが無い、という人はぜひコピペしてつかってみてください。映像も見てほしいので！動画の埋め込みコードを取得してきて、データ１−１の部分にデータ１−２の部分にデータ１−３の部分にデータ２−１の部分に、データ２−２の部分にデータ２−３の部分にを、それぞれ入れてみました。これで、最初に見せたような、自己紹介のページは、だいたい出来たんじゃないかと思います。今日紹介できなかった、ol､ul､li､dl､dt､dd、hr､pre､blockquote､div、hr､pre､blockquote､div、form、input、…など様々な細かいタグや、CSSなどについては、是非今後学んでみてください！今回は、ザッと簡単なサイトを作ってみることで、苦手意識を無くして、「HTMLって、WEBってそんな感じなのか、面白いかも」と興味を持ってもらえたなら嬉しいです。

全体の流れ

放送の全体の流れはこんな感じでした。

講師自己紹介
そもそもHTMLとは何か
世界一周をした理由
HTMLを書いてみよう①
先生の失敗談
HTMLを書いてみよう②

授業のようす

実際の放送のキャプチャ画像で授業のようすをご紹介。

「こんにちはキラです。ライダース着てきたぜぇ、ワイルドだろぉ〜？」

「こんな感じでね、世界一周して旅の１分動画作ったんスよ、次はウユニ撮りたいっスね」

「でも今日はね、HTMLの講座なんで、その話しますね。

こんな感じの、簡単な自己紹介ページを一緒につくりましょう」

「HTMLというのはウェブサイトの構造を決めます。CSSは見た目を定義するモノなんですねー」

「はい、実際に書いてみましょう。動画とかもパーンと貼ってみると楽しいっすよね」

「なんか生徒さんの中にザーボンさんのアイコンの人おるwwぶははww」

「ろくろはねー、こうやって回すとツボが綺麗にできるんすよー」

「テンション上がってきた、ジャケット脱いだろ」

「ろくろはね！やっぱりこう！こう回さなきゃ！」

てなわけで、ろくろについてアツく語った６０分になりました。

受講者のコメントを紹介

というのはもちろん嘘で、実際ちゃんとHTMLやりましたよい。

放送内で、受講者さんから実際に入ったコメントは以下の通り。

実名の引用はNGですが、一部紹介してここでコメントを返しますw

講師自己紹介について

めっちゃ良い動画ですね。海外行きたいなー（T.H.さん）

きらこう

いやー嬉しいっすね。ぜひこの辺からいろいろご覧になってください。

そして、ぜひドローン持って旅してみてください。最高ですよ！

ドローン始めたきっかけがかっこいい・・・（R.T.さん）

きらこう

褒められたww「世界一周しながら映像が撮りたかった」的なことを言った気がします。

平井堅？（K.H.さん）

きらこう

おい誰がPOP★STARや

（引用:http://www.pinups.co.jp/hirai/）

授業内の感想

出来上がっていく感じが楽しい！！（T.A.さん）

感動する～（M.T.さん）

すっごい（M.H.さん）

天才！！！（Y.I.さん）

ミニコーナーが楽しいｗ（J.T.さん）

初心者にやさしい吉良先生！（R.T.さん）

先生のお話もっと聞きたかったです。今日はありがとうございました。（K.K.さん）

めっっっっちゃたのしい！（H.O.さん）

先生おもしろいです（笑）（Y.K.さん）

先生の授業は何時間でも聴けますね。（T.A.さん）

おや！続編あるんですか！やった！（H.O.さん）

きらこう

うおー、こんなに褒められるとやっぱり嬉しいですね。せんせい、カンチガイしちゃうw

誰かに似てる？と思った！（M.T.さん）

きらこう

やから誰がPOP★STARや

（引用:http://www.pinups.co.jp/hirai/）

授業内で答えられなかった質問について

授業内でお答えできなかった質問もあるので、ここでお答えしてみようと思います。

figureとp、sectionとarticleの区別が難しいのですが、このように区別できるという方法があれば教えてください（J.A.さん）

きらこう

お、やや高度な質問ですね。

figureタグは、「その部分が無くても全体の意味は通るけど、補足として入れたい図や表、画像」を入れる時に使われることが多いですね！

sectionやarticleタグは、divが最も意味が無くて汎用性の高いのに対して、目的や意味がややはっきりしています。sectionが、本における「章」だとしたら、articleは、さらに小さな「ひとまとまりの文章」くらいの感じでしょうか。

まさかWordファイルでくるとは意外（Y.S.さん）

講座に必要なテキストなど、事前にわかるとさらにうれしいです！ダウンロードするのに、時間かかってアワアワしました・・・初心者なので。でも授業自体は面白かったので、それで集中できなかったのが残念です！（E.M.さん）

きらこう

この辺は、ほんとすみません。

本来テキストなどは無くても良いのですが、できるだけ分かりやすくするために、内容の書き起こしをしたら、授業前ギリギリになっちゃいました！できるだけ早めに用意しますw

WEBアプリケーションを作成するに当たり、①HTML + PHP, ②Spring, Struts, Seasar2などがありますが、①の手法は古いとは思っていません。実際のところ、先生はどうお考えでしょうか？（A.O.さん）

きらこう

①の方法がいいと思います。というのも、②の方法だとできる人が少なくて、チームでやったり外注したりする際に余計にコストがかかってしまうかと。

どのようなアプリケーションかにもよりますが、特別な理由がない限りは、共有しやすいやり方でやるほうが、全体での費用対効果が高まると思われます。

個人的な感想やまとめ

今回、生放送＆オンラインの授業って初めてだったのですが、やってみての感想は以下の通り。

６０分はやっぱり短い！

いやー、やっぱり６０分は予想以上に短いですね。自己紹介して、基礎の話して、ちょろっと書いたらあっという間に時間ですw

無駄な内容はほぼなかったと言っていいと思いますが、それでも、出来るコトは限られていましたね！

用意していた内容の半分くらいしかできなかったので、次回以降に持ち越しになりました。

ただ、上記の通り、生徒さんの反応は良かったので、悪くはなかったと思います。

生徒さんがかなり意欲的＆好意的

これもけっこう意外でしたw顔の見えない授業とかってもっと荒れるのかと思っていたのでw

「進行を無視した高度な質問されたり、悪口言われたりするのかな…」とビビってましたが、全くそんなことはありませんでした。

やはりこの辺は、Schooのユーザー層がしっかりしていて、仕組みもしっかりしている証拠ですね！

生放送って楽しい

そんなワケで、全体的に、とても楽しくて新鮮な体験になりました。めっちゃ褒められたしw

こういう楽しいご依頼は、どんどんお受けしていきたいですね！

次回以降の内容も、各SNSや当ブログでお知らせ＆レビューしていきたいと思います。

各SNSはこちらからどうぞ！

プロフィール

それでは今日はこのへんで。

明日も、良い人生とよい旅を。

WordPressでブログ＆ウェブサイトをつくるメリット＆デメリット

キラ＠デジタルノマドラボ — Tue, 07 Feb 2017 23:29:42 +0000

今回の結論を先に

今回の内容の結論、先に結論からまとめてしまいます。

「WordPressでウェブサイトを作るメリットとデメリット」は、

WordPressのメリット

・カスタマイズが自由で簡単

・知識や技術が身につく

・独自ドメインで運用できる

・広告含め、載せる内容が自由

・アクセスアップに強い

・そこまで難しくない

・情報が豊富

WordPressのデメリット

・開設がちょっと大変

・維持コストがかかる

・多少の慣れと技術が必要

・限界もある

WordPressを使うべき人

ということで、どんな人にオススメかというと、

名前

多少の手間は問題ないので、他のものと差別化されたブログやウェブサイトを、本格的に作っていきたい！

アクセスも長期的にしっかり集めていきたいし、web制作に関しての知識や技術も身につけていきたい！

という人にオススメ、ということです。

前回のおさらい

さて、前回、「無料サービスを使ってウェブサイトやブログを作るメリットとデメリット」について書きました。

アメブロやwixってどうなの？無料のサービスでブログやサイトを作るメリット＆デメリットについて。

この中では、wixやJimdo、はてなやアメブロ、ライブドアブログのような「無料でブログやウェブサイトが作れるサービス」のメリットとデメリットについて書きました。

今回は、それと比較して、独自ドメインやサーバーを自分で取って作るブログやウェブサイト、

その中でも特に「WordPress（ワードプレス）」を使って作成するメリット・デメリットについて書いていこうと思います。

メリット１，カスタマイズが自由で簡単

WordPressで作成するブログ＆ウェブサイトは、カスタマイズの幅が広く、また簡単です。

例えば、WordPressには「テーマ」とか「テンプレート」と呼ばれるデザインの「型」のようなものが用意されており、

それらを適用するだけで、色んなデザインに変更ができます。

加えて「プラグイン」という機能拡張システムで、ちょっと複雑なシステムも簡単に導入できます。

例えば、お問い合わせフォームを一瞬で作成したり。

基本的な使い方を理解した後も、

HTMLやCSSなどのコーディングについて学べば、細かなカスタマイズやデザイン変更もどんどんできるようになります。

このように、WordPress含め、自分で作ったサイトは色々と自由にカスタマイズができるのです。

当たり前のことではありますが、これは、間違いなく最大の魅力の一つだと言えるでしょう。

また、しっかりとアクセスアップ対策を行っていれば、長期的に多くのアクセスがあるサイトを作ることも可能です。

作りこむのが大変なぶん、ちゃんと作れば長期的にはかなり潰しがききます。

メリット２，知識や技術が身につく

自分でブログやウェブサイトの製作を行った場合、面倒なことは多いのですが、

その分、サイトのデザインやHTML/CSSのコーディング、 PHPやJavaScriptなどのプログラミング、 SEOやソーシャルメディアなどによるアクセスアップ… といった知識や技術が、少しずつ身につきます。

ただ、ゼロから全てコーディングして作るのに比べると、簡単に始めることができます。

なので「Web製作の技術を身に着けたいけど、何からすればいいのかわからない…」という人は、

まずはWordPressでサクッとサイトを立ち上げつつ少しずつ知識を身に着けていく、というのが、とてもオススメの方法です。

さらには、WordPressを使っている企業や個人はけっこう多いので、一定以上の技術が身につけば、仕事の依頼もけっこう来ます。

例えば僕の場合、社団法人festivoで定期的にWordPress講習会の講師として教えたり、

色んな企業や個人のブログやウェブサイト制作、運用、カスタマイズ、コンサルティングの依頼を沢山頂けるので、

正直なところ、WordPress関連だけでも、けっこうな額を今まで頂いています。

[su_row][su_column size=”1/2″] [/su_column] [su_column size=”1/2″] [/su_column] [/su_row]

そんなワケで、やっぱり少しずつでも、知識や技術を身につけるのはオススメなんです。

メリット３，独自ドメインで運用できる

WordPressなどで自分で作成したブログやウェブサイトは、独自のドメインで運用できます。

ドメインとは、「◯◯.com」とか「◯◯.jp」というアレですね。インターネット上の住所みたいなものです。

あれが、基本的には自由に決められます。

これが、無料サービスを使って作ると、URLの末尾に「◯◯.wix.com」とか「◯◯.hateblo.jp」という文字が付いたりします。

（※有料版にアップグレードすれば、外せるサービスもあります）

特に気にならない場合は良いんですが、IT系の人たちは「短くてシンプルなURLの方がクール」みたいに思ってるフシがあり、

末尾に「.wix.com」とか付いてると「あ、無料サービスで創ったんだな…」と分かったりします（笑）

僕の場合、このブログには「kohkira.com」と、自分の名前をキュッとURLに当てています。

あとは、「独自ドメインの方が長期的なSEOには有利」という意見もありますが、

最近はレンタルブログもSEOけっこう強いよね、ということで、意見が割れているみたいです。

まあ、最終的には好みやこだわりの問題になるかもしれません。

独自ドメインの取得の仕方に関しては、ここに詳しく書きました。参考まで。

【画像付き】５分でできる！お名前.comでドメインを取ってみよう。

メリット４，広告含め、載せる内容が自由

広告などが自由にコントロールできるのは、自分でサイトをつくる最大のメリットの一つといえるでしょう。

アメブロなどのレンタルブログの場合、無料で使用すれば記事の中に勝手に広告が入ってしまいます。

しかも、この広告収益は書いた人には入りません。受取の権利はあくまでサービスの運営会社にあります。

まあ、だからこそ無料でサービス提供できるワケです。

さらには、運営会社の利用規約に反する広告掲載は禁止されており、エグい貼り方をすればアカウントの停止などをされてしまいます。

その一方で、自分でドメインとサーバーを取得すれば、好きな場所に好きなように、「自分の」広告を掲載できます。

例えばこんな風に、好きな場所にGoogle AdSenseの広告を張ったり。↓

基本的に自由に、広告を入れたり消したりできます。

これは、「カスタマイズが自由」という部分にも通じるメリットですね。

また、自分で作るサイトは、基本的に何でも書けます。

もちろん、エログロとか違法、倫理的にアウトな内容になると、レンタルサーバー会社などからNGを食らうでしょうが。

レンタルブログのように、ちょっとエグいセールスや人の悪口くらいで、アカウント停止されてブログが消える、なんてことはありません。

まあ、そんな際どいネタを書く人はそうそう居ないかと思いますが、

レンタルブログ等の場合、運営会社の裁量で決定されるので、やや不安定といえば不安定です。

これは例えるなら、大きなマンションに住む場合、マンションのルールがあり、

管理会社から出て行けと言われたら出ないといけない、というのに似ている気がします。

メリット５，アクセスアップに強い

WordPressで作る場合ですが、ちゃんとやることやれば、しっかりアクセスが集まります。

もちろん、表面だけ作って放置、じゃダメです。

・目的やコンセプト、キーワードをしっかりと決めて

・サイトを立ち上げて

・各種設定を適切に行って

・SEOも意識した良い記事を沢山作って

・SNSなどでしっかりシェアして被リンクを増やして

・数字や結果をしっかり計測して改善して

・それを継続する

というコトをしっかりやれば、しっかりPVも上がり、売上も上がります。

多少の手間と時間はかかりますが、じっくりと取り組めば、必ず結果が出るし、数字を見て細かいコントロールもできるようになります。

そもそも、「アクセスはどんな経路からあるのか」については、以下の記事に書きました。

WordPressアクセスアップの方法。まずは「５つの経路」について知ろう。

そして、具体的なキーワード選定法や設定に関しては、以下の記事にも書きました。

初心者でも分かる！WordPressブログSEOのためのGoogleキーワードプランナーの使い方

完全保存版！WordPressブログにおすすめのプラグイン23選

拡散を狙え！WordPressの「All in One SEO Pack」でOGP設定をしてアクセス数を増やす方法

メリット６，そこまで難しくない

独自ドメインやサーバーを取得して、WordPressを使ってサイトを作るのは、無料で簡単に作れるサービスと比較すると、ちょっと大変です。

ドメインとサーバーの申し込みして、それらを紐付けて、WordPress入れて、テーマやプラグイン入れて…と、やることがいっぱいあります。

これらは、慣れないうちはけっこう大変なんですが、ちゃんと調べればそこまで難しくないし、一度慣れてしまえば、けっこう簡単です。

メリットと呼ぶほどのことではないかもしれませんが、ビビリ倒すほどのことではありません。

このブログ内にも、作り方を写真付きでかなり詳しく書いていますので、コレを見ながらやれば大丈夫。

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

メリット７，情報が豊富

さて、これも大きなメリットの一つです。

WordPressを使う場合、大抵のことは、調べれば何とかできます。

日本にもユーザーが沢山いるので、情報もネット上に沢山あります。

「WordPress＋やりたいこと」で検索すれば、かなりの数の記事がヒットします。

WordPressは世界中で使われているCMS（＝ブログ等を作るシステム）なので、英語ができればさらに情報を得られます。

人に聞いたり、本で調べるより、検索して独習する機会はとても多いので、これはとてもうれしい所ですね。

WordPressを使うデメリット

さて。最後に、独自でサイトを作るデメリットについて。

まあ、前の記事と上の内容を見ていただければ、大体の内容は想像できるかもしれませんが(笑)

より深く理解していただくため、細かく説明をしていきましょう。

デメリット１,開設がちょっと大変

無料で簡単なウェブサイト＆ブログサービスと比較すると、ですが、WordPressでのサイト開設には、少し手間がかかります。

サーバーとドメインを取得して、それらを設定して、WordPressをインストールして、テーマをインストールして、プラグインを入れて…

とやって初めて、まともなウェブサイトの形になります。

そこまで難しい内容ではありませんが、最初はちょっと苦労するかもしれません。

これは言葉で説明するのが難しいので、とりあえずやってみて、ダメなら諦めましょう（笑）

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

デメリット２，維持費コストがかかる

WordPressを利用する場合、自分でドメインとサーバーを取得して、そこにWordPressをインストールして利用します。

WordPress公式のサイト（wordpress.com）から会員登録して利用するのは、簡単ですが絶対にオススメしません。

有料版ですら、テーマやプラグインの利用に制限がかかって、最悪だからです。

なので基本的には、サーバーやドメインを自分で取ることになります。

そしてその場合、維持費がかかるワケです。

ドメインの場合、安いものでは100円以下から取ることができ、１年後の更新料はだいたい1500円〜/年くらいです。

（もちろん、どんなドメインを取るかにもよりますが）

サーバーの場合、「エックスサーバー」のようなレンタルサーバーは年間で数千円、

「アマゾンAWS」のような重量課金制サーバーの場合は、使ったぶんだけ(=アクセスがあった分だけ) 料金を支払うシステムになっています。

昔と比べるとドメインもサーバーも相当に安くなっていて、今では子供のお小遣いで取れるほどになりました。

が、維持費を払う必要があるというのは、デメリットの一つです。

もちろん無料サービスを使う場合も、高度な機能を使う場合は課金するのがベターなので、

本気でブログやウェブサイトを運用する場合は、遅かれ早かれお金はかかることになるでしょう。

あとは、定期的なメンテナンスやバックアップなど、労力としてのコストも多少は発生します。

これも、そんなに大変なことではありませんが、一応デメリットの中に入れておきます。

デメリット３，多少の慣れと技術が必要

WordPressを利用する場合、「ダッシュボード」という独自のUI(管理画面など)に慣れていく必要があります。

こんな画面ですね。

また、基本的な製作が終わった後も、アクセスなどはSEO対策やソーシャルメディア対策を行って自分でやっていかなくてはいけません。

一度慣れてしまえば楽なのですが、慣れるまで少しの辛抱が少し必要です。

あとは、中級者以上になると、細かいカスタマイズがしたくなると思いますが、それにはHTML/CSS、PHPなどのコーディング・プログラミング技術が必要になってきます。

これも、分かる範囲から少しずつやっていけばいいのですが、「細かい作業が全くだめ！発狂する！」みたいな人はキツいかもしれません（笑）

まあ、これもビビる程ではないので、考えるよりは実際にやってみるのが一番です。

デメリット４，限界もある

WordPressでのブログやウェブサイト作成は、カスタマイズの幅が広いというメリットがありますが、

もちろん、それには限界もあります。

WordPressは、基本的にはウェブサイトやブログ作成のためのCMSなので、「月間１００万PVのメディアブログ」などの運営は余裕でできます。

ただし、複雑なシステムを要するサービスなどには向いていません。

例えば「cookpad」や「NAVERまとめ」のような、ユーザーがログインして投稿をするタイプのサービスの作成は、WordPressでは難しいでしょう。

（このようなサービスをつくりたい人は、基本的なHTML/CSSコーディングを学んだ後、Ruby on Railsなどを勉強しましょう）

機能としての限界の他に、使う人の技術力によっては、（最初は）カスタマイズの限界もあります。

WordPressのデザインには、基本的に「テーマ」や「プラグイン」という機能を使用するのですが、

デザインは良くも悪くもこれらのシステムに依存するので、そういう意味での限界が存在するのです。

つまり、段階としては

初心者

テーマ？プラグイン？なんだそれ？どうやって使うの？

という段階から

中級者

基本的なシステムは使えるようになったけど、ココをもっとこうしたいなあ…

となって

上級者

HTML&CSSのコーディングを覚えて、細かいカスタマイズもできるようになったぞ

という段階を経る必要があるのです。

なので、中級者までは、色々ともどかしいこともあるかもしれません。

まとめ

以上、ちょっと長くなりましたが、まとめていきましょう。

「WordPressでウェブサイトを作るメリットとデメリット」は、

WordPressのメリット

・カスタマイズが自由で簡単

・知識や技術が身につく

・独自ドメインで運用できる

・広告含め、載せる内容が自由

・アクセスアップに強い

・そこまで難しくない

・情報が豊富

WordPressのデメリット

・開設がちょっと大変

・維持コストがかかる

・多少の慣れと技術が必要

・限界もある

WordPressを使うべき人

ということで、どんな人にオススメかというと、

名前

多少の手間は問題ないので、他のものと差別化されたブログやウェブサイトを、本格的に作っていきたい！

アクセスも長期的にしっかり集めていきたいし、web制作に関しての知識や技術も身につけていきたい！

という人にオススメ、ということでした。

少しむずかしい内容もありましたが、どうでしたか？

まあ、言葉で説明するのが難しい所もあるので、まずは実際に手を動かしてみてください。

記事内でも紹介しましたが、こちらに詳しくまとめてあります。

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

それでは、明日も、良い人生と良い旅を。