こんにちは、キラです。

今日はAIツールの面白い話。以下のツイートに要約しています。

みなさん、「QRコード」ってわかりますよね。

Paypayなどの支払い用に一般化したので、「もちろん使ってるよ」という人も多いハズ。

あの、白と黒の四角い模様で、スマホで読み取るとウェブサイトに飛んだり、情報が見えたりするアレです↓

でも、あれってちょっと地味で、無機質というか、あまりおしゃれじゃないですよね…。

それが、最近のAI（人工知能）の進歩で、そのイメージがガラッと変わるかもしれない、という話。

どう変わるのか？それは、QRコードがアート作品みたいに美しくなるんです。

Stable DiffusionとControlNetが、美しいQRコードイラストを実現

それを可能にしたのが、「Stable Diffusion」や「ControlNet」というAIツールです。

これらAIツールの力で、QRコードが美しいイラストに変わってしまいました。

パッと見ほぼイラストなのに、もちろんQRコードとしてきちんと読み込めます！！すごい！

「そもそもQRコードってどうやって読み込むんだっけ？」とか

「ええ…どこのサイトに飛ぶのかわからないQRコード読み込みたくないな…」

という人は、こちらの記事を先にご参照ください。

QRコードの安全確認と読み取り方のガイド

QRコードのイラスト化は、どうマーケティングへ応用できるか？

さて、この新しい技術、ビジネスにどう活用できるか？を考えてみましょう。

例えば、広告やポスターに使うQRコード。

これが美しいイラストになれば、より多くの人が興味を持ってスキャンするかもしれませんね。

また、企業のロゴやブランドイメージを反映したQRコードを作れば、ブランドの認知度向上にもつながりそうです。

企業が使うだけではなく、一般の人々にとってもこの技術はとても魅力的。

例えば、家族や友達へのメッセージを含むQRコードを作って、それをおしゃれなイラストとしてプレゼントする。

そんな楽しみ方もできそうです。

この新しい技術がどんどん普及すれば、我々の生活もきっとさらにおもしろくなるはずです。

これからの発展が楽しみですね！

「これがAIの力！QRコードが美しいイラストに変身」まとめ

というわけで今回はQRコードが美しいイラストに変わる、その驚きの技術について書きました。

QRコードは、商品やサービス、ウェブサイトへの誘導ツールとして一般的に利用されてきました。

でも、それが一転、ビジュアル面でも魅力を放つツールに生まれ変わるとは、驚きでした。

これが「AIの力」のひとつです。

このAIの最新トレンド、ぜひ注目してみてください。

そして、あなた自身のビジネスやライフスタイルに、この新しい技術をどう取り入れるか、一緒に考えてみてください。

この記事が、その一助になれば嬉しいです。

これからも、僕の目線から面白いテクノロジートレンドもお届けしていきますので、どうぞお楽しみに。

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

明日も、よい人生とよい旅を！

こんにちは、キラです。

６月の２４日と２５日、東京にて、ホームページ作成（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

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

RIMOWA（リモワ）のスーツケースを安く買いたい！

ちょうどドイツに行く予定があるけど、どうすれば良いものが安く買えるの？

という人向けの内容。結論は、

安く買うならミュンヘン！限定モデルならフランクフルト空港！

免税手続きも忘れずに！

という感じです。

ドイツのフランクフルトより

どうもキラ（KOH_KIRA）です。

ドイツのフランクフルトへ行ってきました。

 

きらこう✈ドローンと世界一周🌏さん(@koh_kira)がシェアした投稿 – 2017 4月 3 3:55午後 PDT

 

きらこう✈ドローンと世界一周🌏さん(@koh_kira)がシェアした投稿 – 2017 4月 3 3:43午後 PDT

予想通り、ソーセージが美味いです。

ビールはちょっと飲んだけど、普通に日本のキンキンに冷えた生の方が好きかもw

僕にとっては、生ビール、タコワサ、冷奴、みたいなジャパニーズ・イザカヤ・コンボが至高です。

あと、今僕は今はガンナガ※1 が食いたいです。ベタカタネギダグ※2 で。

※1ガンナガ…博多名物「元祖長浜（がんそながはま）ラーメン」の略称。全国チェーンの「一風堂」などと比べると非常にアッサリ、しかしクセになる味。チンピラみたいな店員が作るラーメンを飲み帰りのオッサン達がすする様子は「硬派」の一言。

※2ベタカタネギダク…うまいラーメンが出てくる呪文。「油多め麺硬めネギ多め」の意。さらに「カタいタマ」の呪文を唱えると、麺のおかわりを召喚できる。

夢がひとつ叶いました

すみません、今回は食べ物の話じゃありません。スーツケースの話です。

夢がまた一つ叶いました。

ずっと欲しかった、RIMOWAのスーツケースを買ったのです。

 

きらこう✈ドローンと世界一周🌏さん(@koh_kira)がシェアした投稿 – 2017 5月 12 5:11午後 PDT

RIMOWAとの出会いと魅力

RIMOWAと僕の、初めての出会いは、確か大学生の時。

『BRUTUS』だか『POPEYE』だかの雑誌に載っていた、ステッカーがベタベタに貼ってあって、使い込んでベコベコに凹んだRIMOWAのスーツケースを見て「かっけえ！」と思ったワケです。

あの直線的で無骨なデザインと、ボコボコになるまで使い倒した「俺、旅のベテランだぜぇ？」感がたまりませんでした（笑）

まあ、二十歳くらいのときの好みって移ろいやすいことも知っていたので、一回寝かせました。

しかし、数年経った今でも、やはりカッコええと思ったんで、今回世界一周中に、買っちゃったワケです。

折角なので、フランクフルト空港でしか買えない、ルフトハンザ航空の限定モデルのやつを。

「RIMOWA（リモワ）」って？

さて、その「RIMOWA（リモワ）」とは何かというと、ドイツの老舗スーツケースブランドです。
Japan (Japanese) – RIMOWA Official Website

良い意味でドイツらしい、直線的なデザインと丈夫な作りで、世界中の旅人に長らく愛され続けています。

たぶん、あなたも一度は、駅や空港で見たことがあるんじゃないでしょうか。

RIMOWA（リモワ）の歴史

RIMOWAが創業されたのは、１８９８年。日本では第三次伊藤博文内閣が成立した頃です。

創業者はポール・モルシェック。はじめは、彼の名前から取った「Paul Morsceck & Co.」というブランド名でした。

ポールは、牛革を素材とした丈夫なスーツケースを作り、有産階級の人達に愛されるブランドの基礎を作りました。

息子のリチャード・モルシェックは、会社を引き継ぐと、自分の名前RIchard MOrscheck WArenzeuchenの頭文字をとって、「Paul Morsceck & Co.」を「RIMOWA」に改名しました。

そして、二代目のリチャードは、鞄作りに、従来の牛革を使用しませんでした。

軽量性や強度の面で優れ、航空機の素材として使われていた金属「ジュラルミン」に着目したのです。

現在もRIMOWAは、創業時の思想は守りつつ、アルミニウムやポリカーボネイドなどの素材の導入や電子タグの使用など、新しいものをどんどん取り入れながら、よりよい製品づくりを続けています。

RIMOWAはミュンヘンかフランクフルトで買おう

そんなワケで、RIMOWAのスーツケースを購入したんですが、かなり調べ倒して実際に行動（購入）したので、色々とわかりました。

今回は、それらを「ドイツでのRIMOWAの買い方まとめ」として、書いていこうと思います。

先に結論から書いてしまうと

「RIMOWAは、安く買うならミュンヘン。限定モデルを買うならフランクフルト。免税手続きも忘れずに」

です。

日本では小さいものでも１０万円以上

さて、そもそも、RIMOWAのスーツケースは、日本ではいくらで買えるのか？

結論から言えば、日本で買う場合、新品だと１０万円以上はします。

RIMOWA Classic Lufthansa Edition Cabin リモワ クラシック ルフトハンザ エディション 36L [並行輸入品] 新品価格 ￥135,000から (2020/9/29 16:27時点)

やはりブランド品なので、国内だとどこでどう買っても一緒ですね。

そして当然、これよりも大きなサイズになっていくと、さらに価格が増していきます。

６０リットル、８０リットル…となっていくと、もっと高くなります。

そんなワケで、RIMOWAは、スーツケースとしては、やや高額な部類に入るかと思います。

RIMOWAはドイツで買うべし

しかし、そんなRIMOWAをお得に買う方法が、実はあるのです。

それは、ブランド原産国であるドイツで購入すること。

各種ブランド品は、その原産国で買うと安くなることがありますが、RIMOWAもその一つなのです。

具体的には、日本の正規代理店の価格と比較して、4割～5割引きで購入できます。

※もちろん、円の相場によって価格は変動します。

RIMOWAを世界一安く買うならミュンヘンのHetzeneckerで

ではさらに、ドイツのどこで買えば、RIMOWAは一番安いのか。

僕が知っている限りでは、「Hetzenecker」（ヘッツェネッカー）というお店が、どうやら世界で一番安いようです。

ドイツのミュンヘンに数店舗あります。

Tal 35, 80331 München, ドイツ

Karlspl. 8, 80335 München, ドイツ

このお店は、RIMOWAのスーツケースを独自ルートで仕入れている為、他店舗よりも安く販売できているそうです。

引用：mux.de

HetzeneckerでのRIMOWAのお値段は？

Hetzeneckerで買う場合、クラシックフライト32Lが467ユーロ！

この記事を書いている時点の、１ユーロ＝１２３円として考えると５７,４４１円！

この時点で、日本で買うより４割安く買えます。

さらにお買い得に

普通に買っても割と安いんですが、クレジットカード使用で5%オフ、現金だとなんと10%オフです。

しかも免税手続で、手数料を考慮してもさらにざっくり10%引きです。

最終的にはクレジットカード＋免税で15％オフ442.8ユーロ（￥５４,４６４円）、現金＋免税で20％オフ416.8ユーロ（￥５１,２６６円）。

結果として、日本で買う半額以下で購入できます。

限定モデルを買うならフランクフルト空港で

そんなワケで、RIMOWAのスーツケースをとにかく安く買いたかったら、ドイツのミュンヘンの「Hetzenecker」がベストです。

が、ドイツで買う場合はもう一つ、オススメの買い方があります。

それは、フランクフルト空港で、ルフトハンザ航空のマーク入りの限定モデルを買う、というもの。

僕は限定のヤツが欲しかったので、こっちで買いました。

購入直後。右上に入っている鳥のマークが、限定モデルのしるし。

これな。↓

ちっさwww

でも、このロゴが分かる人には分かるアレなのです。

ドイツのルフトハンザ航空のロゴですね。

引用：https://www.lufthansa.com/

この限定モデルが、フランクフルト空港の「World Shop」で買えるワケです。

ベーシックな「トパーズ」や「クラシックフライト」はまず間違いなくありますが、

ちょっとめずらしいモデルをお探しの方は、先にオンラインショップで探して購入して、店頭で受取り、という方法もオススメです。

→RIMOWAのオンラインショップはこちら

実際に購入した体験記はコチラ。

それ以外の街やお店でも安い

以上、オススメは上記２点の買い方なのですが、それ以外の街やお店でも、日本で買うよりもずっとお得には買えます。

普通に、ドイツ各地のカバン屋さんやデパートで購入できます。

色んな所で見て調べてみましたが、価格は大体、トパーズ３３リットルで６９０ユーロ、クラシックフライトで５４０ユーロくらいでした。

この価格でも、日本で買うよりもずっと安いですね。

免税手続きも忘れずに

さて、無事購入が出来ても、これで終わりじゃありません。

ユーロ圏で購入したものは、免税手続きをすることで、さらにお得になるのです。

「免税手続き」とは「旅行者が負担しなくてもいい税金を返してもらう」ことの総称。

要は、ちょっと大きな買い物すると、お金が返ってくるワケですよ！

RIMOWAのスーツケースにもそれが適用され、１５％（！！）のお金がさらに返ってきます。

免税手続きのおおまかな手順は、以下の３点です。

１，購入時に「Tax Free Form」をもらう

免税手続きの手順は、品物が違えど、方法は大体一緒です。

まずは、商品の購入の際に

Would you give me a tax free form?

（免税手続き用の書類ください！）

と伝えましょう。

２，必要事項を記入する

tax free formをもらったら、必要事項を記入しましょう。

名前や住所など、簡単な項目ばかりなので特に問題ないかと思います。

３，空港で税関スタンプを貰って申請

出国時、商品とフォームを持って、空港の免税手続き窓口へ行きましょう。

窓口の場所や流れは出国前に調べておいて、当日は時間に余裕を持って空港へ到着するのがベターです。

僕の場合は、ドイツでスーツケース購入後、パリ、ローマ、と渡ってからEU圏外のオスロへ飛んだので、ローマで免税手続きを行いました。

よほど変なことしてたり、係の人の機嫌が悪かったりしなければ（笑）すんなりと手続きできるハズです。

返金方法は、現金払い、クレジットカードへの入金、口座振込があるようです。

僕は、クレカへの入金を選びました。

え、これでもう終わりすか？

はい、もう終わりですよ。クレジットカードを通して、お金が戻って来ています。

という感じ。

ドイツ出国後、３カ国周ってユーロを抜けたので、ちょっとビビってましたが、すんなり終わって拍子抜けでした。

これよりさらに詳しい、免税手続きの体験記はコチラに。↓

お金が返ってきた！海外旅行で買い物をした際の免税手続きのやり方まとめ【フィウミチーノ空港】

まとめ

そんなワケで、ドイツでのRIMOWAのスーツケースの買い方のまとめでした。

もう一度結論を書くと

「RIMOWAは、安く買うならミュンヘン。限定モデルを買うならフランクフルト。免税手続きも忘れずに」

ということでした。

購入したリモワは、旅の中で手に入れたステッカーをどんどん貼って、今こんなんなってます。

→【写真】RIMOWA（リモワ）のスーツケースにステッカーをベタベタ貼ってみた

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

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

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

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

内容は以下のとおり↓

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

今回教えた内容

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

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

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

作成するページ

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

書くコード

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

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

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- コメント CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle1.css">
  </head>
  <body>
	<header>
		<h1>自己紹介ページ</h1>
	</header>
	<div>
	    <h2>基本プロフィール</h2>
		    <img src="selfiecircle.png" width="200" height="200">
		    <p>
		    吉良　光（きらこう）
		    <br>
		    世界中を旅して、GoProとドローンで映像を撮っています。
		    <br>
		    世界一周をしながら、<a href="https://www.facebook.com/gotr1p/" target="_blank">旅する１分動画「TR1P（トリップ）</a>を作りました。
		    <br>
		    <a href="https://kohkira.com/">旅とテクノロジーのブログ「BackPackHack」</a>も書いています。
		    </p>
		 <h2>世界一周の旅に持っていったドローン「Mavic Pro」</h2>
		    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
		 
		 <h2>「TR1P（トリップ）」の動画の一例</h2>

		<table>
		<tr>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639375376258220%2F&show_text=0&width=400" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639379822924442%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F665801863615571%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		</tr>
		<tr>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639383326257425%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639854562876968%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
		    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F643131885882569%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		</tr>
		</table>
	</div>
    <footer>
    	このサイトは、KOH_KIRAによって運営されています。
    </footer>
  </body>
</html>

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

を、

<p>Hello World</p>

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

<p style="font-size: 16pt;">Hello World</p>

と書いたりすると、「このpで囲んだ部分は、文章で、文字の大きさは16ピクセルなんだよ」という意味になります。
このような、タグと属性の基礎を押さえていくことが、HTML/CSSの基礎になります。


・はじめてのHTML

新しいファイルを開いて、

<!DOCTYPE html>
<html lang="ja">
</html>

と書いてみてください。
次に、その中にheadタグとbodyタグを書き込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

これで、「今からHTMLの文章を作るよ」「言語設定は日本語だよ」「ここが基本情報（head）で、ここが（実際に表示される）body部分だよ」と書き込む準備が出来たワケです。

<head>タグで囲まれた内容は、「htmlファイルの情報」を宣言するものです。
<head>タグの中の内容は、<title>タグを除いて普通はブラウザの画面上に表示されません。

で、実際にウェブサイトに表示される内容が<body>タグ内の内容、というワケです。

次に、headタグ内にmeta charsetとtitleを入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>schooではじめてのHTML</title>
  </head>
  <body>
  </body>
</html>

<meta charset="utf-8">（メタキャラセット）とは、「文字の種類」を定義しています。文字化けなどをしないようにするための設定ですね。
Shift_JISとかもあるんですが、一般的にはこのutf-8を使うことが多いです。とりあえず入力しておきましょう。
titleタグは、そのまんま、「このウェブサイトのタイトルはこれだよ」と定義してあげるタグですね。

次に、bodyタグの中に、以下のように文字を入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>schooではじめてのHTML</title>
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
  </body>
</html>

ここまでできたら、ファイルを保存してみましょう。
上の「File」から「Save」か、command（control）+Sを押して保存してみましょう。
保存名は「index.html」で。


・ブラウザに表示してみよう

保存したファイルを、ブラウザにドラッグ＆ドロップしてみましょう。
すると、タブの部分にtitleタグ、本文内にpタグの内容がそれぞれ、出てきました！

「ページのソースを表示」で見てみると、あなたの書いたHTMLが出てきます。

※ここまででつまづいてしまっている人にありがちなのは、文字のつづりの間違いや、スペース（空白）の全角/半角が間違っている場合などです。チェックしてみましょう。

・HTMLを使って動画を挿入してみよう
ここまでやって「全くおもしろくない…」と思った方も、一部いるかもしれません。
（僕も最初思ってました　笑）
ここでちょっとだけ「おおー」となってもらうために、ちょっとだけ遊びましょう。

youtubeの動画を開いてください。
新しい動画を開いたら、「共有」から「埋め込みコード」を選択。
その内容をコピーして、bodyの間に入れてみてください。

 <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>

ファイルを改めて保存して、ブラウザを更新すると、動画がでてきます。
…ちょっとだけ、テンション上がるでしょ？
<p>動画を埋め込んでみよう！</p>という感じに、コメントも入れてみましょう。
これと同じやり方で、Twitterやフェイスブックページなども埋め込んだりできるワケですね。


・よく使うタグ
よく使うタグとして、descriptionタグなどがあります。
これは、検索結果などに表示される内容なので、正確に入力する必要があります。


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>


・styleタグを使ってみる（はじめてのCSS）
body内に、CSSを書いて見た目を変えられる、styleタグを使ってみましょう。
bodyの中に

 　　<style>
    	p{color: blue}
    </style>

を書き込んでみましょう。
全体はこうなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <style>
    	p{color: blue}
    </style>
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
    　　<iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

すると…文字の色が青くなります。

・CSSファイルを分ける
ただ、このstyleタグ、次第にとっても長くなっていく上に、大量のページに同じものを書いたり修正したりするのが大変になってきます。
なので、冒頭で述べたように、HTMLファイルとCSSファイルという形で分けて、
head内には、「このCSSファイルを参照するよ！」とだけ書いておくようにします。

まずは、さきほどの　p{color: blue}　の部分を切り取って、
新しくファイルを作り（command+N）、新しいファイル内に貼り付けます。
そのファイルに「mystyle.css」という名前をつけて、index.htmlと同じ場所に保存しましょう。

次に、head内に、以下の内容を書き込みます。

<link rel="stylesheet" href="mystyle.css">

全体としてはこうなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</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に<!-- CSSを呼び出し -->と書いて、学習メモを残してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

このコメントは、自分用のメモの他、人とコードを共有する際のメモ書きとして、
また、<!-- -->で囲むことで「消したくはない部分を無効化」したりするのにも使います。


※このコメント部分も、ソースを表示すると、見ることができてしまうので、機密情報や変なことは書かないようにしましょう！


ちなみに、CSSのコメントは /*コメント*/ という風に書くことができます。


・セクションタグを使ってみよう

ここまでが、HTMLの基礎です。
次は実際に、ちょっとしたページを作りながら、いろんなタグを使ってみましょう。
今回僕は、自己紹介のページを作ってみようと思います。

HTMLのタグはたくさんあるのですが、
今回は（時間も短いので）できるだけシンプル、かつ分かりやすいタグを優先して使っていきましょう。


・headerタグと見出し<h1>…<h6>タグ

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

</body>の下に

    <header>
	</header>

と書いてみましょう。
そして、この中にまた書き込みをすると、それがサイトのヘッダーに表示されるわけです。

今回はここに

   <h1>自己紹介ページ</h1>

と入れてみました。
（ <p>はじめてのHTMLだよ！</p>　は、消しておきました）

<h1>は「見出し１」という意味です。
文字を”見出し”として目立たせる時に使います。
h1からh6まで使うことができます。

そして、それぞれの見出しにCSSでデザインを割り当てて、文字の大小や周りの色などを調整したりもできます。

見出しの例としては、スタイリングして分かりやすくしたこちらを見てみましょう。
マレーシア、クアラルンプールのシンボル「ペトロナス・ツインタワー」を１分で旅しよう


ついでに、
<p>動画を埋め込んでみよう！</p>
の部分も、

<h2>世界一周の旅に持っていったドローン「Mavic Pro」</h2>
と変えてみました。見出しになります。


・footerタグ
footerタグも、最もよく使われるセクションタグの一つです。
ウェブサイトの一番下に、情報などを載せるタグですね。

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

などと、入れてみましょう。

これで、全体としては

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- コメント CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
	<header>
		<h1>自己紹介ページ</h1>
	</header>
    <footer>
    	このサイトは、@KOH_KIRAによって運営されています。
    </footer>
    <p>動画を埋め込んでみよう！</p>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

こんな風になり、ヘッダーとフッターができた形になりました。
これ以外にも、sectionやarticleなどの細かいセクションタグがあるのですが、ちょっと長くなるのと、今回は使わないので割愛します。

・imgタグで画像を入れてみよう

ヘッダーとフッターができたら、次はその間に本文を入れてみましょう。

        <h2>基本プロフィール</h2>
	    <img src="selfiecircle.png">

を入れてみます。
画像は、index.htmlと同じ場所に入っている画像の名前を、指定してみてください。

このままだとデカすぎたりするので、

　　　　　width="200" height="200"

をimageタグ内に追加して、画像の大きさを指定します。


・改行のbrタグ
画像を入れることができたら、その下に簡単な自己紹介を入れてみましょう。

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

これだけだと、文章が全て続いた状態で表示されてしまうので、<br>タグで、「改行」をしてみましょう。

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

このbrタグには、閉じタグはありません。
ここまでで、全体では、こうなりました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- コメント CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
	<header>
		<h1>自己紹介ページ</h1>
	</header>
	    <h2>基本プロフィール</h2>
		    <img src="selfiecircle.png" width="200" height="200">
		    <p>
		    吉良　光（きらこう）
		    <br>
		    世界中を旅して、GoProとドローンで映像を撮っています。
		    <br>
		    世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。
		    <br>
		    旅とテクノロジーのブログ「BackPackHack」も書いています。
		    </p>
		    <h2>世界一周の旅に持っていったドローン「Mavic Pro」</h2>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
    <footer>
    	このサイトは、@KOH_KIRAによって運営されています。
    </footer>
  </body>
</html>


・aタグでリンクを設定しよう
よく使うタグの一つとして、文章や画像に「リンク」を入れられるaタグというものがあります。
今回は、先程の文の中に、リンクを貼ってみましょう。

まずは、飛ばしたい先のリンクを用意します。

世界を旅する１分動画「TR1P」　https://www.facebook.com/gotr1p/
BackPackHack  https://kohkira.com/

そして、リンクを入れたい文字を、それぞれこのように囲みます。

		   
		    世界一周をしながら、<a href="https://www.facebook.com/gotr1p/">旅する１分動画「TR1P（トリップ）</a>を作りました。
		    
		    <a href="https://kohkira.com/">旅とテクノロジーのブログ「BackPackHack」</a>も書いています。

これで、リンク付きの文章が出来上がりました。
さらに、最初のリンクだけ、「新しいタブで開くリンク」にしてみましょう。
a href=""の後に
           
           target="_blank"

 を書き足すだけです。
 こんな風になりました。

            世界一周をしながら、<a href="https://www.facebook.com/gotr1p/" target="_blank">旅する１分動画「TR1P（トリップ）</a>を作りました。

これで、最初のリンクだけ、新しいタブで開くようになりました。試してみてください。


・tableタグを使って、項目を並べてみよう

次に、tableタグを使って、６つの項目を表のようにキッチリ並べてみましょう。
動画の下あたりに

			<table>
			<tr>
			<td>データ1-1</td>
			<td>データ1-2</td>
			<td>データ1-3</td>
			</tr>
			<tr>
			<td>データ2-1</td>
			<td>データ2-2</td>
			<td>データ2-3</td>
			</table>

と書き込んでみてください。
更新すると、６つに別れた表が出てくると思います。
これは、tableタグというものを使って、表を作ったワケです。
<tr>は「ここから行が始まるよ」<td>は「ここから列が始まるよ」という意味。

じーっと眺めて考えると、なんとなく見えてくるんじゃないかと思います。

・tableの各項目に動画を入れてみよう
この、tableタグで作った表の中に、文章以外の項目を入れることも可能です。

ここには、文章でも画像でも、何を入れても構いません。あくまでtableタグの練習なので、

僕は、先ほどと同じように、動画を入れてみることにしました。
特に入れたいモノが無い、という人はぜひコピペしてつかってみてください。映像も見てほしいので！
動画の埋め込みコードを取得してきて、

データ１−１の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639375376258220%2F&show_text=0&width=400" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ１−２の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639379822924442%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ１−３の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F665801863615571%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ２−１の部分に、

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639383326257425%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ２−２の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639854562876968%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ２−３の部分に

	    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F643131885882569%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

を、それぞれ入れてみました。

これで、最初に見せたような、自己紹介のページは、だいたい出来たんじゃないかと思います。

今日紹介できなかった、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はこちらからどうぞ！

プロフィール

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

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

明日、５月２７日１９時より、オンライン学習の「Schoo（スクー）」のライブ授業に、講師として出演します。

Schoo – 参加型のオンライン動画学習サービス

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

僕が顔出し声出しで動画に出るって、個人的には割とレアです。

「Schoo（スクー）」とは？

参加型のオンライン動画学習サービス「Schoo」の説明は以下の通り。

国内最大級の授業数。ITスキルや最先端の知識が動画で学べる

業界最先端のITスキルをはじめとして、社会人が抑えておきたいビジネススキル、さらにプログラミングやWebデザインの基礎から応用まで、明日の仕事に生きる授業をラインナップしています。

Schooの特長は「参加型生放送」で授業が日々開講されていること。毎回異なるテーマについて、受講生同士や先生との生放送中の対話を通じて、一人では得られなかった「答え」を得ることができます。

参照:https://schoo.jp/about

いいですねー。

就職前や起業前に勉強したい学生も、転職したいサラリーマンも、何か新しい趣味などをやりたい普通の人も、オンライン動画で色々学べるサービスですね。

僕が初心者に優しい理由

「HTMLに一切触れたことがない初心者のための60分」ということなんですが、きっと良い授業が出来ると思います。

なぜなら僕は‥

４歳でエリートの両親にPCを与えられ、
６歳でプログラミングを始め、
１０歳でゲームを作成し、
１４歳で大金を稼ぎ、
政府機関から莫大な報酬を受け取るウィザード級ハッカーに…

というのは、完全な嘘でwww

実際の僕は‥

もともとはITも機械も好きでなく、
高校生まで携帯は家族兼用で、
数学は割と苦手で大学は文学部、
微妙にコミュ障だったけどmixiでネットに触れはじめ（笑）
大学中退後引きこもってガチで金が無くなったので仕方なく受けたサイト制作の仕事で始めてプログラムも触りだして…

という、典型的な後発組のヒトなんですね。

そんな、手と足を動かして、泥臭く実践で覚えたタイプなのです。

技術を学んだお陰で、今はこうなれました。↓まだまだ未熟者ではありますが。

プロフィール

小さな机に、クソみたいなASUSのパワーブックと「サルでもわかるHTML」を並べて「ああ？分かんねえよクソが…」とか独りごちていたあの頃がとても懐かしいw

分からない人の気持が分かる

そんなワケで、いい授業が出来る、というのはあながち嘘ではなくて、

「分からない人の気持ちがけっこう分かる」わけですよ。

初心者にとって、どこが面白くなくて、どこで挫折するか、とかが分かる、と。

「こういうのがメンドイよねー、わかるわかる」という感じのノリで、受講者さんに共感してく感じでやってきます。

もちろん、あくまで外部講師なので、基礎の部分もちゃんとやります（笑）

そんなワケで、お知らせでした。

こちらの記事も、あわせてどうぞ。

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

「ゼロからITやりたいけど何からすればいい？」という人へ。３つの基礎から固めよう！

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

身体で覚えろ！ブラインドタッチ（タッチタイプ）のコツと練習方法。

【保存版】適当に始めちゃダメ！ウェブサイトやブログを「本気で」作る前に考えるべき８つのこと

ブログで稼ぎたい人へ。最初にやるべきたったひとつのこと【a8.net登録】

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

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

なぜ、あなたのブログ＆サイト作りはいつも挫折するのか？原因と対策を教えます。

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

いつまでも子供のように人生を楽しむ秘訣。なぜ、年をとるほど一年が短く感じるのか？

WordPress講習。自然界のものは下から伸びる。

https://kohkira.com/daniel/

仕事に「ウラ技」はない。地力を付けることで道は開ける。

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

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

「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でブログ＆ウェブサイトを作ろう。

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

ブログやウェブサイトを作る人が必ず使うのが「フリー素材」。

どうせなら、オシャレで印象的なものを、安全かつ無料で使いたいですよね。

今回は、フリー素材・写真・画像サイトまとめとして、

素材数が多く、使い勝手の良いフリー素材サイトを１７個、全力でまとめてみました。

これだけあれば、もう素材探しに困らないハズ。

自分に合ったサイトを、探してみてください。

ぱくたそ

http://www.pakutaso.com/

言わずと知れた、日本最大級のフリー素材配布サイトです。

とにかく高品質・高解像度にこだわっている他、年間の行事や時事ネタもすぐに素材にしてくれるフットワークの軽さも有り難いですね。

ジャンルは、人物や自然風景やオブジェなど、総合的に揃っています。

ブログやホームページに画像をちょっと差し込みたい、という程度なら、このサイト一つで充分なくらいです。

いらすとや

http://www.irasutoya.com/

こちらも、超メジャー級素材サイト。

日本に住んでいる人なら、一度はここのイラストを見たことがある、というレベルです。

もはや、現実社会の広告すら、「いらすとや」に侵食されているレベル（笑）

ここも、あらゆるジャンルのかわいいイラストがある他、時事ネタにもすぐに対応するフットワークの軽さがあります。

このブログには、テイストが合いにくくて使う機会があまりないのですが、可愛い系で分かりやすいイラストが欲しい方は、ぜひどうぞ。

写真素材　足成

http://www.ashinari.com/

こちらも、日本最大級の全国のフリー素材配布サイト。

アマチュアカメラマンさんが撮影した写真を提供してくれています。

風景、飲食、人物とオールジャンルをカバー。

掲載枚数は75000枚以上（２０１６年３月時点）と、すごいボリュームがあります。

タダピク

http://www.tadapic.com/

こちらは画像をキーワード検索できるサイトです。

２９の無料画像提供サイトから、検索ワードに合った画像をピックアップしてくれます。

これで様々なサイトをはしごして画像を探す手間が省けますね。

例えば「三毛猫」で検索すると8,170,000件もヒットします。すごい（笑）

pixabay

https://pixabay.com/

こちらも、シンプルなフリー素材検索サイト。

ワードを打ち込むだけで、オシャレな写真からシンプルなイラストまで、様々な素材が探せるのが嬉しいです。

日本語でも英語でも検索できるし、タグから似た画像を辿ったりもできるので、操作性が良いですね。

everystockphoto

http://www.everystockphoto.com/

北米を中心に、全世界でも有名な写真素材の検索エンジンです。

他の共有サイトを含めて、500万点以上から写真を探せます。

海外サイトなので、多少英語が理解できる必要がありますね。

morgueFile

http://www.morguefile.com

高品質・高解像度の写真素材がなんと約100万枚！

これも海外のサイトなので、全て英語表記で写真も海外の風景や人物です。

一部有料ですが、ほとんどが無料で利用できます。

ユーザー登録が必要ですが、FacebookやTwitter経由でユーザー登録できるので、登録に手間もかかりません。

一部有料素材もあります。

Mediachain

http://images.mediachain.io/

ワードを打ち込むと、いろんなフリー素材サイトを横断的に検索してくれるサイトです。

これも、英語のみを使用します。

ちょいちょい画質のあまりよくないものがひっかかるのは難点ですが、検索結果は多く、バリエーションも豊富です。

写真AC

http://www.photo-ac.com/

人物写真や風景写真だけでなく、インテリアや小物などの幅広い写真が取り揃えられています。

サイトもすっきりとして使いやすいですね。

利用には、ユーザー登録が必要です。

ソザイング

http://sozaing.com/

写真から様々なWeb素材まで揃っている総合フリー素材配布サイトです。

ユーザー投稿型のためクオリティに差がありますが、幅広い種類の素材が見つかるというメリットもあります。

Freestockphotos.biz

http://www.freestockphotos.biz/

約15,000枚もの写真素材がで利用可能です。人物系の写真の種類がとても豊富です。

LoveFreePhoto

http://lovefreephoto.jp

自然風景や町並み、海外などの写真が多く掲載されています。

同じモノの写真でも、様々な角度からのものがあって細かなニーズに応えられます。

ゆんフリー写真素材集

http://www.yunphoto.net/

最大600メガピクセルクラスの高解像度の写真素材サイトです。とにかく高解像度。

英語、中国語など15の言語に対応し世界の200の国と地域から月間30万人、200万PVとワールドワイドに活用されています。

キー局のドラマやクイズ番組やCM、メジャーアーティストのMVでも使用されているんだとか。

ビジトリーフォト

http://www.busitry-photo.info/

人物写真中心のフリー写真素材サイトです。

商用利用も可能。ユーザー登録が必要です。

笑顔、怒る、叫ぶといった「感情」のカテゴリで分けられていて、Webメディアの記事に使いやすそうな写真が多く掲載されています。

サブコンテンツの「プロカメラマンが教える、写真の撮り方講座」も、是非読んでみてください。

MIKA★RIKA

http://mika-rika-free.jp/

「私たち、無料です」。おお…なんかドキドキする。

可愛い女の子２人の写真が使い放題。

様々なシチュエーションの写真素材の他、女の子の声で撮られたセリフなどの音声素材も利用できます。

このサイト自体も話題になったのですが、ここからさらに派生したフリー素材インド人『DEV★SAN』もかなり話題になりました（笑）

GIRLY DROP

http://girlydrop.com/

コスメやスイーツなど、「女の子っぽい」写真に特化したフリー素材検索サイトです。

なんかこう、全体的にキラキラフワフワしています。

僕のような一人旅ガジェットオタク野郎は使いませんが、女子ブロガーさんはぜひどうぞ。

モデル・フォト

http://model.foto.ne.jp/

女性モデルに特化したフリー写真素材サイト。

動作、シーンやアイテムから検索ができて、女性メディアなどに使いやすそうです。

ユーザー登録もクレジット表記も必要無しで、商用利用も可能です。

まとめ

今回は、「これさえ押さえておけば、写真素材で困ることは無い！」というくらいに、使い勝手の良いフリー素材サイトをまとめてみました。

まずは各サイトを実際に見てみて、実際に使ってみましょう！

全てを常に使うことはないと思うので、使ってみて合いそうなものを幾つか、ブックマークしておいてください。

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

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

コチラの記事も、あわせてどうぞ。

今回言いたいことを一言でまとめてしまうと

「WordPressって便利だよ。初心者は挫折しにくいし、中〜上級者も色々使えるから」

です。

毎回ザックリしすぎな気もするけど（笑）まあこんなトコです。

ウェブサイトはお家みたいなもの

以前の内容↓で、「ウェブサイトって、こんな感じでできてんだよ」という話をしました。

【初心者向け】バカでもわかる、ウェブサイトのしくみ

「ウェブサイトとは、簡単に例えるならお家みたいなもの。サーバーは土地、ドメインは住所、コードが材料」という風に説明をしています。

今回は、「じゃあ、どんな風に作るのがいいの？」という話。

実際の作業に移る前の、知識をちょっとだけつけましょう。

あなたのサイト作りが挫折するまでの流れ

知識ゼロからウェブサイトを作成しようとして挫折する経緯って、だいたい皆似ています。

よっしゃ、ウェブサイトを作るで！

と意気込んで、本屋で分厚い本を数冊買ってきて（意外と高いです）、数時間格闘します。

そして、トップページのタイトルとキャッチコピーくらいがやっとできた…くらいの所で、

ふう…こんなに大変なのか…ボチボチちょっと休憩しよ

とか思ってるうちに、なかなか再開せず…

あれ、もう半年くらい何もしてない…

という感じ で挫折したりするワケです。

はいそうです。僕の実体験です（笑）

ゼロからのサイト作りは大変。

そんなワケでまあ、挫折する人の気持がよく分かるんですが（笑）

色々作れるようになった今なら、その理由もよーく分かるようになりました。

全くの素人がゼロからサイトを作ろうとするのは、普通の人がホームセンターで木材を買ってきていきなり一軒家を建てようとするようなもの。

ドアを作るだけでも大変なワケです。

もちろん、その根気強さとスキルは後々必ず役に立つことなので、根気よくこれを続けてもらっても良いと思います。

ただ、初心者が独学する時は、「できるだけ早く、目に見える成果を得る」ことも大切です。

つまり、ちょっとやって「すげえ出来た！」となると、テンションがあがって飽きずに続く、ということ。

「骨組み」でお家を作ってしまおう

そんなワケで、オススメなのは、ちょっとだけショートカットをすること。

お家を作るのに、ゼロから作るのではなく、ある程度出来上がっている「骨組み」を利用するのです。

その「骨組み」に当たるのが、「WordPress(ワードプレス)」というシステムです。

WordPress(ワードプレス)ってなに?

WordPress(ワードプレス)とは、ざっくりと言ってしまえば 「プログラムをほとんど書かずに、ウェブサイトやブログを作ることができるシステム」です。

正確には、「WordPress」とは、ブログ用のCMS(コンテンツ・マネジメント・システム)の略です。

ほとんどの方が、Facebookやアメーバブログのような、SNSやブログサービスを使ったことがあると思います。

CMSとは、「本格的なブログやウェブサイトを、Facebookに投稿するように（プログラミングをほとんどせず）作ることができるシステム」です。

こんな感じの管理画面から、いろいろ書き込んだり設定したりすると、ウェブサイトが出来上がっていく、という感じ。

初心者の人でよく分からなくても、今のところは

​「ウェブサイトをイチから作るのは大変だから、ワードプレスっていう骨組みを使うとラクなんだなー」くらいに理解できればOKです。

初級者から上級者まで使えるWordPress

さて、このWordPress。初心者にもオススメなんですが、中〜上級者になってもずっと使えます。

メリット・デメリットについては別記事で紹介しようと思いますが、

WordPressで作ったサイトやブログは、細かいデザインやハイレベルなSEO対策など、高度な作り込みができます。

僕も、WordPressを使って４〜５年くらいになりますが、技術的に掘り下げられるポイントは、沢山残っています。

つまり何が言いたいかというと、「WordPressは、初心者でもとっつきやすいし、中〜上級者になっても使えるよ」ということ。

本格的なウェブサイトをつくりたい！という人は、利用してソンはないワケです。

まとめ

さて、今回言いたいことを改めて一言でまとめてしまうと

「WordPressって便利だよ。初心者は挫折しにくいし、中〜上級者も色々使えるから」

ということでした。

初心者向けの導入だったので、ちょっと物足りなかったらスミマセン。

「それはわかったよ！で、何からしたらいいんだ！」という人は、以下の記事を読みながら手を動かして、実際に作ってみてください。

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

WordPressを使ってウェブサイトやブログをつくりたい人向けに、

前回は、最初のステップとして「エックスサーバーの申し込み」をやってもらいました。

【画像付き】ウェブサイト＆ブログ作りの第一歩！エックスサーバーの登録方法を解説します。

今回は、それに引き続き、「お名前.comでドメインを取得する」というのをやってみましょう。

これも、できるだけわかりやすく、画像つきで丁寧に説明していきます。

ちなみに、「ドメイン」は、サイトを作るときの住所のようなものですね。

は？ドメイン？サーバー？なにそれ？

という人は、↓まずこちらの記事からどうぞ。↓

【初心者向け】バカでもわかる、ウェブサイトのしくみ

ここまでの内容がちゃんとできている人は、さっそく、実際にドメインを取得していきましょう！

お名前.comにアクセスしてドメインを探してみる

まず、お名前.comのページにアクセスします。

→お名前.com(http://www.onamae.com/)

開いたら「まずは、ドメイン名を検索してみよう！」の下の入力欄に、

取得したいドメインを入力して、【検索】をクリック。

すると、取得できるドメイン一覧が表示されます。

※☓がついている場合は、既にドメインが取得されていて、取得不可、という意味です。

いろんな文字を調べてみて、取得できるドメインを調べてみましょう。

ちなみにこの時、日本語のドメインも検索できます。日本語ドメインのメリット・デメリットに関しては、ここに書きました。

いまさら聞けない！日本語ドメインのメリットとデメリット

取得したいドメインを選んで申し込みへ

取得したいドメインにチェックをつけたら、【料金確認へ進む】をクリック。

ちなみに、ドメインの決め方は、国内のみをターゲットにする場合は、

値段と好みだけで決めてしまって、問題ありません。

「料金確認へ進む」を押すと、次のページに飛ぶので、以下のように項目を埋めていきます。

■１，お申込み内容

「登録期間」は、とりあえず１年登録で問題ありません。

「Whois情報公開代行」にはチェックをつけましょう。

※このチェックを入れないと、サイト管理者の名前や住所、電話番号がネット上に公開されてしまうことになります。

■２，サーバーの選択

サーバーは「利用しない」を選択します。

【次へ進む】をクリック。

会員情報の入力

ここが一番面倒だと思いますが、会員情報の必須項目を全て入力し、【次に進む】をクリック。

以下のような宣伝が表示されたら、右上の☓を押して消してしまって大丈夫です。

確認して申込み

支払い方法を選択し、利用規約を確認し、

【規約に同意し、下記内容を申し込む】をクリックします。

これで、ドメインの申し込みは完了です。

まとめ：土地と住所が用意できた！

さて、ここまでできたなら、ウェブサイトやブログを作るためのサーバーとドメインが用意できた状態です。

つまり、お家を作るのに、土地と住所が用意できた状態。

地味ではありますが、着々と用意ができています。

ここまでできたらさらにもうひと踏ん張り。次はサーバーとドメインを紐付ける設定をしていきましょう！

また次回の記事で、詳細を書いていきます！

初心者でもできる！エックスサーバーとお名前.comの設定方法

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

今回の内容を、先に一言でまとめてしまうと

ウェブサイトとは、簡単に例えるならお家みたいなもの。

サーバーは土地、ドメインは住所、コードが材料

ということです。

そもそも、ウェブサイトって何?どうやってできてるの?

今回の内容では、超初心者向けに

「そもそも、ウェブサイトってなんなの?」という話からしていこうと思います。

「そんなのは分かってるから、早くサイト作ろうよ」という人は、この内容は読み飛ばして、こちらの記事から読んでしまっても大丈夫です。

【画像付き】ウェブサイト＆ブログ作りの第一歩！エックスサーバーの登録方法を解説します。

ウェブサイトとは「お家」である

初心者向けにわかりやすくするため、たとえ話を使って説明をしていきます。

ウェブサイトとは「お家」だと思ってください。

ウェブサイトを作る時に必要な「サーバー」「ドメイン」「コード」を、それぞれ、お家を建てる時に必要な「土地」「住所」「材料」にたとえて、説明をしていきます。

※正確に表現した場合には多少の語弊があることもあるかと思いますが、あくまで初心者さんに雰囲気を掴んでもらうためのものなので、ご容赦ください!

土地=サーバー

さて、お家を建てようとしたら、まず必要になるのが「土地」です。

インターネット上では、「サーバー」が、これに当たります。

これは恐らく、ほとんどの人が名前くらいは聞いたことがあるかと思います。

まずはこのサーバーを用意するのが、ホームページを作る第一歩になります。

サーバーは、自分で設置をする他、 「ロリポップ」や「エックスサーバー」のようなレンタルサーバー(大きなサーバーの一部を借りるスタ イル)や、 アマゾンのAWSのような従量課金制(使った分だけお金を払うスタイル)のサーバーなどがあります。

サーバーの登録に関しては、ここにも書いてみました。

【画像付き】ウェブサイト＆ブログ作りの第一歩！エックスサーバーの登録方法を解説します。

それぞれの特徴や実際の設置の仕方については後から述べていきますので、 まずは​「サーバーってのは、ネット上の土地みたいななものなんだなー」​くらいに覚えておいてください。

住所=ドメイン

さて、「土地」を確保したら、次に「住所」を設定します。

この「住所」に当たるものが、「ドメイン」です。

これも、聞いたことがある人は多いでしょう。

◯◯.comや□□.jpみたいなアレですね。

このブログの場合は、「kohkira.com」という文字列が、住所になってます。

これはどういうことかというと、

広ーいサーバー(土地)の中にドメイン(住所)を割り当てることで、

来る人がウェブサイト(お家)の正確な位置を把握して、来ることができるようになっている、というわけです。

これは、「お名前.com」などの、ドメイン取得サービスで取得するのがオススメ です。

お名前.com→http://www.onamae.com/

具体的なやり方については別記事で触れていくので、 まずは​「ドメインって住所みたいなアレなのね」​とだけ覚えておいてください。

補足：「.jp」や「.com」には意味があるの？

ちなみに「.jp」や「.com」などの文字列には意味や特徴があるの?とよく聞かれます。

「.jp」は「japan」
「.uk」は「united kingdom(イギリス)」
「.com」は「company（会社）」や「community（集団、団体）」
「.mobi」=「mobile(携帯)」

など、一応それぞれに意味はついているようです。 最近は.tokyoなどの都道府県ドメインなども見られるようになりました。

意味は一応付いていますが、まあ正直、持つドメインは何でもいいです。

web系の人が「短くてシンプルなドメインの方がちょっとクールだよね」と思うくらい。

なので、これに関してはまずは好きなものを取ってOKです。

最初はドキドキするでしょうが、そのうち慣れてバンバン取るようになります(笑)

ちなみに、この時よく出る「日本語ドメインってどうなの？」という質問に関しては、以下の記事に答えを書きました。気になる人だけどうぞ。

いまさら聞けない！日本語ドメインのメリットとデメリット

材料=コード

「ドメイン」の内容が少し長くなりましたが、喩え話にもう一度戻ります。

最後は、お家を建てる「材料」です。

土地(サーバー)を取って、そこに住所(ドメイン)を設定したら、そこに人が来ることができる(=アクセスできる)ようになります。

しかし、人が来た場所にはまだ何もないので、そこに実際にお家を組み立てる必要があります。

この家の組立てに必要な「材料」に当たるのが「コード」です。

コードとは、「プログラミングコード」のこと。

みなさんも一度は見たことがあるであろう、こんな感じの宇宙文字みたいなやつですね(笑)

プログラミングコードとは、ざっくり言うと「コンピューターに命令を出すための言語」のことです。

アメリカ人やイギリス人に意思を伝えるには英語が必要で、

中国人に意思を伝えるには中国語が必要なのと同様、

コンピューターに命令を出すには、プログラムという「コンピューター言語」が必要なワケです。

そして、大工さんが木材を組み立ててお家を作るように、

ウェブデザイナーやプログラマーは「ここはこんな風に表示してね」という「命令」を出すコードをどんどん書いて、ウェブサイトを作っていくのです。

一般的なウェブサイトの場合は、HTML/CSS、PHP、JavaScriptなどが使われることが多いですね。

ちょっとむずかしい言葉も入りましたが、今はとりあえず

「あの宇宙文字みたいなプログラムってのは、コンピューターに命令を出すための言葉で、Webサイトはその命令を材料にしてできてるんだなー」

という感じで、理解できていればOKです。

まとめ

今回の内容を、改めて一言でまとめると

ウェブサイトとは、簡単に例えるならお家みたいなもの。

サーバーは土地、ドメインは住所、コードが材料

ということでした。

極力簡単になるよう、例え話でザックリまとめましたが、どうでしょうか。

この辺を先に理解していると、いざウェブサイトやブログを作る時も「今はこんなことをしているんだな」というイメージが湧きやすくて、失敗も少なくなると思います。

分からないことがあれば、コメントや問い合わせで遠慮なく質問してください。

理解できたよ！という人は、ぜひ実際に手を動かして、ウェブサイトやブログをひとつ、作ってみてください。

以下の記事で、やり方をやさしく解説しています。

【画像付き】ウェブサイト＆ブログ作りの第一歩！エックスサーバーの登録方法を解説します。

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

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