非IT業界のweb担当者一年生ブログ

出版社でweb担当となったITの素人達が、web、ITのあれこれを備忘録的にまとめるブログ。

TCDテーマでサーバ移転の際にロゴ画像が表示されない不具合の解決方法

 web担当一年生の岩本@GB_iwamotoです。

twitter.com

今回は、ワードプレスのテーマである「TCDテーマ」を使用している方は読んでおいて欲しい内容です。

【ご協力のお願い】
タイトルにある内容と同症状で苦しんでいる方々がいらっしゃいます。
ここでお話する解決方法は他には書かれていない情報ですので、
是非シェアしていただけると幸いです。

 

特定条件下で「TCDテーマオプション」にある「ロゴの設定」が機能しなくなり、ロゴがアップロードできなくなるという不具合に関して、解決方法を見つけました。

その特定条件下とは、サーバ移転をした際に起こります。

まずは、どういった流れでその状況になったかをお話し、最後に解決方法をご説明します。

 

不具合の発生と解決までの流れ

①サーバ移転前にロゴ画像がSSL化できない問題

②サーバ移転後にロゴアップローダーの不具合発生

③エラーの特定

④修正

 

①TCDテーマにおける旧式のロゴアップローダーはSSL化に対応していない関数が使われていた

 

運営しているwebサイトにて、SSL化を試みた所、ロゴ画像だけが「http」のURLから切り替わらないという不具合が起きました。

当webサイトにおけるテーマはTCDテーマを使用。
そのTCDテーマには、ロゴ画像をアップロードする機能(ロゴアップローダー)があります。

不具合を特定するために検索を開始。
TCDテーマの運営会社によるサイトにて、当該不具合の解決策にあたるコードを見つけます。
そこで書かれていた原因としては、旧式のロゴアップローダーはSSL化に対応していない関数が使われているとの事でした。

tcd-manual.net

上記記事の指示に従い、コードをコピペして書き換え、ロゴ画像をSSL化する事に成功。

 

以上は半年前に行っていた内容で、以下の内容から2018年8月に移ります。

 

②サーバ移転をした際、ロゴアップローダーが機能しなくなる

運営しているwebサイトを新しいサーバに移転する事になりました。

サイトの表示スピードを速めるためです。

 

無事に移転が終了したかと思いきや、ロゴ画像だけが表示されていないという不具合を確認。

画像URLを確認した所、「httpss」という存在しないURLとして表示されていました。

 

一旦、ロゴ画像の削除を試みるため、アップローダーを起動させると、ロゴの画像が真っ白。

削除する事は出来ますが、再アップロードをすると再び真っ白になり、URLがhttpssという状況が繰り返されます。

 

アップローダーを動かしているheader-logo.php内のコードが書き換わってしまっている事を発見。

エラーの解決方法を調査するため検索を開始。

TCDテーマの運営会社によるサイトにて、下記記事を見つけます。

design-plus1.com

この記事は6年前の内容になりますが、サーバ移転に伴い、PHPCGI版からモジュール版に変更されているため該当する可能性があると仮説を立てます。

しかし、対処方法の内容が難しいうえに、CGI版に戻したいわけではありません。

 

また、この記事の文末に、どうしてもアップローダーが機能しない場合、機能を削除して直接コードを書き換えて欲しいとあります。
これでは、このテーマを購入した意味がない。

 

困り果てていましたが、検索の最中にこんな記事を見つけました。

 

roadbikelife.net

TCDのテーマ自体WordPressが普及してきたころから長い間様々なテーマをリリースしてきたこともあり、おそらく古いコードを使いまわしていて潜在的なバグを生んでしまったのだろうと思います。

 

初心者にとっては、不信感が爆発的になる状況。

ですが、この情報はエラー箇所を確信する決め手となりました。

 

つまり、TCDのテーマが原因である事は間違いなく、ロゴのアップローダーをプログラムしている"header-logo.php"にしか原因はあり得ないということです。

それも検索していても出ない情報となれば、プログラマーにとっては深い問題ではなく簡単なバグである可能性が濃厚。

 

難しい問題で自分のような初心者ではどうしようもないのではないか、という先入観を捨て、再調査。

そこで、冒頭のTCDの運営会社による記事に戻る事になります。

tcd-manual.net

 

ここにあるソースコードの該当箇所をもう一度見直しました。

すると、問題が起きているサイトの方のheader-logo.phpは下記のようになっていました。

サーバ移転後にロゴの不具合を起こすTCDテーマのheader-logo.php該当箇所

 

'http'と'https'の後にあった:(コロン)が抜けています。

 

【正しいコード】

修正箇所の正しいコード


PHP内の他のコードではコロンがあり、httpとhttpsのコードにのみ発生
していました。
その内容から察するに、先程の記事で指摘されていたSSL化するに適していない古いコードだったのではないでしょうか。

 

④親テーマと子テーマのheader-logo.php内にある該当箇所にコロンを入れて修正完了。

エラー箇所が特定できたので、コロンを入れて本来のコードに戻していきます。

まずは子テーマを修正。

しかし反映されず。

 

もしやと思い、親テーマを見ると親テーマも変更されていました。

両方の箇所を修正すると、アップローダーが正常に機能。

解決いたしました。

2015年発売のTCDテーマでも同じ不具合が起きる

 また、私たちweb担一年生では、2015年に発売されたTCDの別テーマをもう一つ購入していました。
そちらも使って、同じ状況になるかを試した所、全く同じ状況が再現されました。

皆様、ご注意いただけたらと思います。

 

今回の情報が、同じweb担一年生な方々のお役に立つ情報だったら光栄です!

TCD,ロゴ,アップロード,できない,不具合,サーバ移転,エラー,コード 

サーバを変更しよう!プラグインやコードをおすすめしない真実!初心者のためのサイト表示スピード改善方法

web担当一年生の岩本@GB_iwamotoです。

twitter.com

今回はサイトの表示スピードを上げるため必要な知識をお話します。

【ご協力のお願い】

今、「サイト 表示速度 改善」というキーワードで検索をすると、上位の記事では上級者向けの記事になっていて難し過ぎる内容が並んでいます。
それを避けて、「かんたん」「おすすめ」というタイトル記事に釣られると基本的な説明が抜け過ぎていて、結局混乱して長時間迷い続けるになります。

(あとに書きますが、僕が実際そうなりました。)


40時間以上迷い続けてサーバに
500エラーが出てしまう僕のような人が出てしまわないよう、この記事をシェアしていただけると幸いです。

 

 

it-support.hatenablog.com

【スピードアップデートに関して発表したGoogleのニュース】

webmasters.googleblog.com

 

「モバイルの検索ランキングにページ表示速度を影響させる」という今回のアップデート。

スマホからの検索は今や皆がしている事ですよね。
その検索表示の順位に関わるというのですから、無視できません。

 
我々が運営しているサイトは表示速度に関して遅く、解決したくとも知識が足りないままになっていました。

この機会にこそ、なんとかして今より表示速度を早くしないと!と思って、ネットを検索して回りました。

その結果、このキャッシュ系プラグインを導入したりコードを書き込めば、あっという間にスピードが向上しました!

 

…というコピペ記事に踊らされまくりました。

初心者なweb担一年生らしく、有用な情報だと思える記事にあたっても、意味をくみ取れず大苦戦。

それでも結果的には少しでも速度を向上し、最善策が何かを理解する事ができました。

また、なぜ露頭に迷い続けていたかも最終的に理解することができました。 

 

そんな訳で、今回は改善策は勿論のこと、ネットで調べる際のコツもお話します。

 

一番の解決策は「サーバの変更」

サーバというのは部屋に例えられます。

プラグインの導入やコードの書き換えというのは、リフォームと同じレベルの話です。

駅から遠くて四畳半…という部屋のリフォームを一生懸命しても、駅から離れている物件である事実は変わりません。

じゃあなぜ、プラグインの導入やコードの書き換えをすること、つまりはリフォームするべきと皆が言うのか。
それは、玄関に物が多いから撤去したり置く場所を変えたりする事で、部屋から出発する時間を減らす事ができるからなのです。
確かに速くなりますが、それは部屋の中の話でしかなく、やっぱり駅から離れている事はどうしようもないですよね。

 

だったらどうするか…そうですね、部屋を引っ越しするに限ります。

駅までの時間を速くするのと同様、サイトスピードを速くする際も同じで、根本的な解決をしたい場合はサーバを変更しましょう。

初心者な自分でもなんとかできないの?→できません。

ネットを検索しているとおすすめのプラグインコードを自分で書き込む方法がたくさん出てきます。

初心者でも簡単に出来るのでは?

と思う所でしょうが、結論から言うと、できません。


ネットにある記事の内、50記事近くを何度も読み、方法を一つ一つ検証してみましたので参考になるかと思います。

その間、40時間近くは掛かっています。

経験値を得たいという目的でもない限り、40時間かかって、事態が悪化するという事もありえます。

実際、検証中にはスピードが落ち、サイトにもエラーが出ただけという結果に陥る場面もありました。

※ちなみに、「プラグイン」といっても、ここではサイトスピード関連のプラグイン「キャッシュ系プラグイン」や「コード圧縮プラグイン」の事を指しています。
<例>
  • W3 Total Cache
  • Autoptimize


プラグインを使うにしても、コードを書き込むにしても、
PHPを使う事ができない限り、不可能です。

PHPワードプレスを動かしてるプログラムだっけ?」というぐらいだと同じ悲劇が繰り返されるので、キャッシュ系プラグインやコードを書き込むのは止めましょう。

一番簡単で安心な初心者用スピードアッププラグイン

さて、そうは言ったものの、サーバ変更以外にとりあえずやれることが一つだけあります。

 

それは画像圧縮です。

画像のサイズが重過ぎてサイトが重くなっている事は、初心者あるあるです。

画像圧縮は、ただ画像のサイズを小さくするだけなので簡単ですし、安全。

 

でも、今更一つ一つやってられないとか、フォトショップなどの画像加工ソフトを持っていないから出来ないという方のために、おすすめのプラグインを紹介します。

 

・EWWW Image Optimizer

 

これは有名なプラグインで、どこでも紹介されています。
一気に画像を適切なサイズに圧縮してくれるので便利です。

操作も簡単。

ただし、画像圧縮だけで急激にサイトが速くなったりしませんので、過度の期待は禁物。

部屋をちょっと掃除した程度と思ってください。
「初心者が一つだけできること」ですので、結果もそれ相応ということなのです。

 

ここで調子に乗って、他のキャッシュ系プラグインやコードに手を出すと痛い目にあいます。(あいました。)

 

半年以内の情報でも最新情報とは限らない

webの世界は、アップデートによって状況が細かく変わっていきます。

最新かどうかという基準は、調べようとしている情報に対して「アップデートがあったのかどうか」です。

webの世界に慣れていない方は、なんとなく半年以内かな…?と思いがちです。

 

かつては正しかった情報でもアップデートが絡んでしまうと間違った情報になってしまいます。
書いてあった通りにやったけど出来なかった!ウソつき!という状況は、アップデートがあった場合による環境の変化で起こるのです。

 

プラグインとコードをいじる前に確認するのはテーマ

多くのネット記事で、しっかり書かれていなかった所がこの内容でした。

サイトスピード向上の際、プラグインやコードの話にばかり収束されていましたが、その前にテーマは何を選んでいるかが重要です。

 

サーバ>テーマ>コード>プラグイン

 

と思っておいてください。

 

ネットで出てきた記事の中でおすすめしているプラグインやコードで行っている設定が、既にテーマに設定されていた場合、二重になってしまいます

結果、サイトのスピードが重くなってしまうのです。
そういった設定の変更が、サーバやテーマにアップデートが入ると行われるため、アップデート情報を見ておかなくてはいけません。

 

ちゃんとしたプログラマーの方が記事を書いている場合は、この内容にも言及しています。

 

では、テーマとの設定の重複を確認するにはどうしたらいいのだろうと思う方もいると思いますが、これは知識をもって一つ一つ調べて確認するほかありません

なぜなら、テーマの中にどんなコードが書かれているかというのは、公開情報ではないからです。
料理のレシピと同じで企業秘密です。

 

…知識が必要、調査が必要。

つまり、初心者たるweb担一年生にはできません。という訳です。

 

次回予告:初心者でもサーバを移転できるプラグインの紹介

いかがだったでしょうか。

そんな訳で、プラグインを入れたりコードを書き換えたりする前に、まずはサーバを変更することをおすすめします。

 

レンタルサーバの引っ越しをどうすればいいか分からない人のためには初心者用の簡単なプラグインがあります。

 

・All-in-One WP Migration

 

長くなりますので、そちらの使い方は次回でご紹介していきたいと思います!

今回の情報が、同じweb担一年生な方々のお役に立つ情報だったら光栄です!

web,初心者



Photoshop不要!四角い画像を丸く表示する方法

みなさんこんにちは!

俺たち非IT系web担一年生プロジェクトの瀬戸です。

 

今日は、ちまたで見かける、人物とかによく使われる丸く表示される画像の作り方を紹介します。

 

↓こんなやつ

f:id:it-support:20180830134536j:plain

 

これだけで、なんだかそれっぽいですよね!?
プロが作ってる感が一気に出ます。

 

これ実は、Photoshopなどは一切不要。cssだけで作れるのです。

 

作り方はすごく簡単。

まずは、四角い画像を貼ります。

f:id:it-support:20180830134536j:plain

 

次に、適当なクラスを指定し、そこに下記のcssを記述します。

ここでは仮に、「face」というクラスを作成しました。

 

 

すると、このような画像になります。

 

f:id:it-support:20180830134536j:plain

 

はい、簡単ですね!

このcssのポイントは、数値を%で表記したことです。

これであれば、どんなサイズの画像でも丸くなりますので、おすすめです!

 

それでは、引き続き楽しいcssライフをお過ごしください!

 

f:id:it-support:20180830095454j:plain

 

実録:さくらレンタルサーバーの速度問題と解決プロセスの注意点(従来からのさくらユーザー向け)

みなさんこんにちは!

俺たちweb担一年生プロジェクトの瀬戸です。

 

みなさん、最近急にご自身のサイトのPV数が下がりませんでしたか?

 

実は最近、googleアルゴリズムが変わり、スマートフォンでのサイト表示に時間のかかるサイトは評価を下げたのです。

そして、レンタルサーバによっては、サーバの仕様(=性能?)で、他サーバよりもかなり処理速度が遅いものがあるのです。

 

そもそも、自分のサイトの速度って、自分で何度も見ているので、正直どのくらい早い(遅い)のか、わからなくなりませんか?

なので、PV数が下がって不安だと思う人は、一度こちらでサイトのスピードを測ってみるといいかもしれません。

 

そして、私たちのサイトを検証してみた結果、どうやらサーバの仕様にも原因があることがわかりました(もちろん、サイト側の問題もあるにはありますが)。

ちなみに、私が今遅いと感じているサイトは、さくらインターネットレンタルサーバ「スタンダードプラン」を使っています。

 

サイトの速度に関係するサーバの仕様として、具体的には、

  • PHPバージョンは、最新であるほど速い(PHP5よりPHP7)
  • Webサーバソフトウェアは、apatch(アパッチ)よりもNginx(エンジンエックス)の方が速い
  • PHPのタイプは、CGI版よりもモジュール版の方が速い
  • gzip圧縮がかかっている方が速い(圧縮画像を除く)

というポイントを見て対処していくと、サイトが速くなるようです。

(8.24現在、PHPバージョンを5.6から7.2に変えましたが、これだけではあまり速くなりませんでした)

 

そして、さくらのレンタルサーバでは、

  • なんと前から契約しているユーザーは、PHP5.6のまま(最新は7.2)
  • Webサーバソフトウェアは、apatchを使用
  • 前から契約しているユーザーは、CGI版のまま(新たにサーバを借りたユーザーは、モジュール版を使用できる)
  • gzipにはなっていない(自分でカスタマイズはできる模様)

 

 

という状態でした。

 

なので、それならいっそ、すべて対応しているXサーバーの「wpx」というwordpress専用のレンタルサーバーに変えようかとも思ったのですが、どちらにしろ上記の変更はかかるので、まずはさくらのサーバ上で、上記へのアップデートが可能か確認してみることにしました。

 

とここでネット上で調べていると、どうやら一昨年からさくらサーバユーザーの間でこのPHP問題は議論になっていたらしく、すでにさくら側でコントロールパネル上で、PHPバージョンをワンクリックで変更できるようにしていることがわかりました。

また、CGI版からモジュール版への移行については、新規でレンタルサーバーを契約したユーザーには標準でモジュール版がついているとの事でしたが、従来のユーザーはCGI版しか使用できない事がわかりました。

同時に、Webサーバソフトウェアは、現状のプランでもNginxが導入されているとの事でした(これは、コントロールパネル上ではわかりません)。

 

となると、①まずは今借りているサーバのPHPバージョンを変更してみて、②うまくいくようであれば同じさくらのレンタルサーバーを借りなおす、という作戦で行こうと考えました。

 

しかし、あまりにもPHPバージョンが違うため、変更したらサイトが表示されなくなるんじゃないかという懸念がありました。

 

そのため、さくらインターネットに電話で問い合わせをしてみたのですが、ちっともつながりません!!

数分ほど自動音声が流れた後切れてしまうのでもう一度かけるのですが、ついにその日はつながらず。仕方なくメールで問い合わせをしますが、返信に3営業日ほどかかるとのこと。

 

翌日にようやく電話がつながったので、PHPを切り替える際に問題となる事はないのかを聞いてみると、

問題が起こるかどうかはわからない。

何もサーバに入っていない状態であれば問題は起こらない。

とのこと。

 

何か起こったら、自分で何とかするしかないのか?という問いには、

こちらでカスタマイズした部分に関してはサポートの範囲外

という答えが返ってきました。

 

ここで重要なのは、レンタルサーバーを借りているライトユーザーであっても、何かあったときは自分でなんとかするしかない、という事でした。

知識がないと、レンタルーサーバーに関する事でも困ってしまうので、やはりどんな人でも、基本的なwebの知識(今回はサーバの知識にも関わりましたが)必要なのだということですね。

 

もしあなたがwebの知識を一通り短期間で学びたいと思うようでしたら、ぜひ私達が運営している「一日でできる wordpressでつくる営業・販売用webサイト作成ワークショップ」にご参加ください!

 

【後日談】

ちなみに、どうせ元に戻せるんだから、とえりあえずPHPバージョンを上げてみようという事になり、エイヤで切り替えたところ、とりあえず不具合はなく、無事に切り替えができているように見えます。

ただ、PHPとNginxを変えただけでは、ほとんど速くなっていません。他にもすべきことがたくさんあるということですね。

 

ということで、これからサイトの引っ越しをしていきますので、そこはまた別の記事で書いていきます!

 

f:id:it-support:20180830095454j:plain

footerのクレジット部分の表記を変更する+ロゴ画像を挿入する方法(Twenty-seventeen)

みなさんこんにちは。
俺たち非IT系web担一年生プロジェクトの瀬戸です。

今回は、Wordpressの公式テーマの一つである「Twenty-seventeen」でのFooter部分のクレジット表記のカスタマイズについて解説します。
素の状態だとこんな感じです(ちょっとcssいじってますが)。

f:id:it-support:20180810134838p:plain

 これを、このようにフッターの表記を変える方法を解説します(ロゴ画像は、当社のwebメディア「Pepito | スペインが好きになる総合情報webメディア」のロゴ画像です)。

f:id:it-support:20180810134852p:plain

 

このような場合、ダッシュボード→外観→テーマの編集に行き、「Template-parts」をクリックし、「footer」のさらに下にある「site-info.php」というファイルをクリックします。

すると、このようなコードが現れると思います。

template-parts/footer/site-info.php

ここから、wordpressの表記などを、自分のサイト名に変え、ロゴ画像も入れる場合は、このように書き換えます(画像URLの部分は、ご自身でアップロードした画像のURLに差し替えてください)。

child themeのtemplate-parts/footer/site-info.php


以上です。

テーマのバージョンによっても若干方法が変わるようですが、ロゴ画像挿入なんかは単純にファイルの該当箇所にURLを入れるだけなので、バージョン関係なく使えると思います。

 

f:id:it-support:20180830095454j:plain

運営側レビュー記事『一日でできる 非IT業界のweb担ワークショップ 』は、こんな内容でした

こんにちは!

非IT系web担プロジェクトの瀬戸です。

 

今日は、6月23日に開催した、第一回目のwebサイト作成ワークショップのレビューを書きたいと思います。

 

これを読んで、自分もwebサイトの作り方を勉強したいけど、どこでやろうかな?と思っている人のヒントになればうれしいです。

 

 

1.そもそもワークショップをやろうと思った経緯

1.1 ご多分に漏れず、webは苦手な出版社です(笑)

うちは出版社なので、もともとwebは苦手でした。今のホームページも友人の会社に作ってもらいましたし、その前のサイトは何世代も前のデザインで、いかにもwebは苦手です!という感じでした。

 

それが、昨今の世の中のニーズから、web媒体もやっていくことが、うちの未来につながる!と思い、三年前にwebメディア第一号であるイギリス専門メディア「ロザリー」を立ち上げました。

 

rosalie.jp

 

1.2 webメディアをやりはじめ、webを勉強しようと思うように

しかしこれも、友人の力を借りて立ち上げたメディアで、プロセスに合わせて自分たちでカスタマイズすることができず、忸怩たる思いを持っていました。

 

どんどんwebの知見を高めようと、続けて去年立ち上げたスペイン専門webメディア「ペピート 」も、友人の会社に協力をしてもらってサイトを作りましたが、このころから管理は自分たちでやりたいと思うようになりました。

 

pepito-web.jp

 

1.3 一念発起、社員とプログラミング教室に通う

そこで去年の夏に、自分たちでプログラミングを勉強しよう!と思い、社員と二人で「テックキャンプ」に参加しました。

当時は「人生を変える一か月」という謳い文句で売っており、ここに行けば、あんなに苦手意識のあったプログラミングを習得できるかもしれない!と、ワクワクしていたのを覚えています。

結果、一か月間では思うところまで習得できず、もう一か月延長したのですが、サービスが作れるまでの知識は得られませんでした。

テックキャンプのテキストも、相手が素人前提で作られているのでわかりやすかったのですが、webの基本的な部分でのなぜ?を理解する事ができず、全般的にかなり苦戦しました。

 

1.4 こうなったら自分で勉強するしかない!

このままではずっとプログラムどころか、webサイトすら満足に作れないと思い、こうなったら自分で勉強するしかないと奮起しました。

そこから約一年ほど、社員の岩本とともに、自分たちでサーバの構築やwebサイトの制作を、独学で学びました。

しかし、無料なので仕方がないとはいえ、web上のブログや書籍を見ても、情報が分散されていて体系立てて理解がしにくく、またバージョンや細かい条件の違いがあるためか、書いてある通りにやったと思っていてもその通りに行かないことが多く、もっとビジュアル使って、体系立ててプロセスごとに丁寧に教えてくれる教材がないかと、いつも苦労していました。

書籍も、少しでも思っていたテーマと違うと、ほしい情報がほぼ載っていないという事もあり、素人には怖くて本を買うことすら難しかったのです。

 

その後も悪戦苦闘しましたが、なんとか自社のデザイン受注サイトを自力で作成できるようになったり、ロザリーやペピートでのPV数を3~4倍にするなど、ある程度の結果がでるようになりました。

 

book-design-lab.com

 

1.5 苦労がわかるからこそ、だれもがwebやプログラムを学べる場を作りたい

そこで思いました。

 

プログラムやwebの世界って、最初の一歩もハードルが高いけど、二歩目も相当ハードル高いんだなあと。

それこそ、IT系の会社なら、研修やOJTで基礎を教えてくれるんだろうけど、非IT系の業種でこれからwebやプログラムを覚えたいっていう人は、その先を考えただけで心が折れる気がしますよね。

 

そこから自然と、僕は非IT系でこのような経験をしているし、しかも出版の人間なんだから、同じようにwebの事を勉強したいけど困っている人向けに、わかりやすく簡潔に教える機会を作りたいと思うようになりました。

 

これが、当社がwebサイト作成ワークショップを始めようと思ったきっかけです。

 

2.ワークショップの準備①:サンプルサイトの作成

 さて、そんなこんなでワークショップをやることにしたのですが、素人がこの手のワークショップに手を出しづらい要因の一つは、「完成品=やるとなにができるのか」

がわかりづらいこと。

 

そこで、最初から「このサイトを作れるようになりますよ」という見本を見せ、同じようなサイトを作りたい!と思う人に参加してもらえれば、わかりやすいし話が早いのではないかと思いました。

 

僕は中小企業の経営層で、友人にも中小起業の経営者が多くいるので、そういった人たちが即戦力として必要だと思う、営業・販売用サイトを作ることにしました。

 

↓こんな感じです

営業・販売用サンプルサイト

 

実際に作っていくと、他サイトで参考になりそうなパーツなどを調べ、それを移植していく方法を覚えるなど、自分の勉強としてもとてもいい経験になりました。

 

また、盛り込んでいる要素も、一般的に行われているホームページ作成ワークショップがホームページ作成の基礎部分とすれば、普通は初心者では教わらない一部中級者向けの要素も入れ込んでいるので、その分実践で使えるものになっています。

サイトはwordpressを使っているので、バージョンが変わると使えないのでは?という心配をされる方もいるかもしれませんが、特定のバージョンのファイルをコピーするので、いつでも同じサイトを作成することができます。

 

サンプルサイト自体は、結果が出ているサイトの要素をふんだんに入れているので、あとはいいコンテンツを入れるだけ!安心して利用してもらえるものになっています。

 

3.ワークショップの準備②:マニュアルの作成

 ワークショップを実施し、その場でなんとかサイトができても、あとで再現できなければ無駄になってしまいます。

そのため、今回のプロジェクトでは、ワークショップ後の振り返り・復習がちきんとできるマニュアルを用意することも、大事な要素でした。

webのブログなどでは、プロセスは書いてあるのですが、「どこのことか」の説明が省かれていることも多く、またしばしばプロセスが飛ばされて説明されていることもあり、素人には苦戦する事が多いと思っていたので、出版社らしくわかりやすいマニュアルを目指そうと思いました。

 

具体的には、全てのプロセスごとに画面のスクリーンショットを撮り、そこにキャプションを入れる形でマニュアル作成を進めました。

こうすれば、行程的な漏れはなくなりますし、どこを操作すればいいのかは赤枠や矢印で記載しているので、場所的な混乱はなくなり、誰でも同じ操作ができるようになるマニュアルになりました。

 

4.ワークショップの準備③:告知・勧誘(営業)

サンプルサイトやマニュアルが完成したので、いよいよワークショップの募集を始めます。

 

実は、ワークショップを始める何か月か前から、Facebook上でプログラムの勉強をしていることや、日々できるようになったことなどを書いて、伏線を張っていました。

そこに書きこんでくれた内容などで、身近な友人たちも同じ悩みを抱えていることが分かっていましたので、まずは近くの友人に直接声をかけるところから始めました。

 

セールストークは、

「普通にサイトを作ったら50万~100万円かかるところを、たったの5万円で無制限に作れるようになるよ!最低でも45万~95万円の得なのでどう!?」

というような感じでした(笑)。

ゼロから1を生み出すのは結果が見えないのでなかなか受け入れられませんが、すでにかかっているコストを削減するのは明確にイメージできるので、実際に関心のある友人には結構刺さりました。

 

この時、ためしにFacebookの広告を初めて利用してみたのですが、まだ世間での認知がなく、(パッと見の)競合が多数存在するレッドオーシャンということもあり、直接対面で説明しないweb広告では、応募は全くありませんでした。

前職ではニッチな商品を売っていたため、リスティング広告が最大限効果を発揮していた経験があったので、両者を含め、自社のプロモーションノウハウのいい経験になりました。

 

5.ワークショップの準備④:応募者は全員webの素人!

その結果、初開催である6月23日のワークショップに、3名の友人の中小企業経営者が参加してくれることになりました!

セミナー開催は前職で何度もやっていましたが、やはり自分の企画したものにお金を払って参加してくれる人がいるというのは、やってきた内容が間違っていなかったという実感もあり、嬉しさは格別です。

こういうことをやっていると、やっぱり営業って楽しい!と思いますね(笑)。

 

もちろん、参加してくれた友人はみな非IT系の業種で、webサイト作成に関しては素人です。

このような人たちに、どうweb作成のエッセンスを覚えてもらえるかが重要です。

 

6.ワークショップの準備⑤:事前準備対応

ワークショップ開催の前に、どうしても待ち時間がかかってしまう作業があるので、当日のスムーズな進行と、ちょっとしたwebへの慣れの練習の意味も含めて、参加申し込みを完了した参加者には、事前準備をしてもらいました。

 

スムーズにできれば二時間程度で終わるのですが、余裕をもって連絡しています。ですがみなさん慣れていないので、大丈夫かなと思っていましたが、ある参加者より、事前にうまくいかないとの連絡が。

電話口で、メールで送られた画面を見ながらアドバイスをします。やはり時間的余裕があると、対応もしっかりできます。

 

無事に必要なプロセスも突破でき、サポートも完了。

これで安心です。

 

7.ワークショップの準備⑥:ワークショップの設営

あとは、ワークショップ当日の設営のための準備を行います。

当日の会場は自社のミーティングフロアで行いますので、設備のチェックなどはしやすかったです。会場をレンタルするとなると、下見ができればいいですが、そうでない場合はぶっつけ本番となるので、機材のトラブルのリスクがあることも考えると、やはり自社開催は安心です。

 

岩本と2人で、撮影機材や進行シナリオや備品のチェックリストを作成したり、会場案内の貼り紙なども準備。

配布用のマニュアルも印刷し、これで準備万端!

あとは当日を迎えるだけというところまできました。

 

8.ワークショップ当日①:まさかの未準備参加者が!

ワークショップは、10時から15時までの5時間。

10時前に、参加者は無事に来てくれたので、主催者側としてはほっとする瞬間です。

 

しかし!参加者の一人が、まさかの事前準備をしていなかったという事態が発生!

 

このパターンは想定していなかったので、かなり焦りました。

ワークショップは、全員で同じプロセスを進んでいくので、置いて行かれないようにしているのですが、事前準備ができていないと、さすがに同じスピードでは進めません。

そのため、岩本にマニュアルを渡し(こんなところでも役に立つとは!)、その参加者について、事前準備+今進んでいるプロセスまで急ピッチで進めてもらう事にしました。

 

最終的には同じところまで進むことができましたが、やはりこのようなバタバタした状況では、しっかり勉強することが難しいと思うので、マニュアルでしっかり復習してもらう&サポートをすることを約束しました。

 

今回はなんとか乗り切りましたが、やはり事前準備はしっかりとしてもらえると、参加する側としても充足度が違うと思います。

事前の質問は可能ですので、ご協力をよろしくお願いいたします!

 

9.ワークショップ当日②:同じようにやっても違う結果に!?

f:id:it-support:20180724175318j:plain

そんなことがありつつも、ワークショップを順調に進めていきます。

 

しかし、cssという画面の装飾ファイルを入れたはずなのに、ある参加者の画面は一切かわりません。ファイルを確認しても、確かに入っています。

おかしいな?と思いつつも、その人の画面を見ると、あきらかに装飾部分のみが抜け落ちた表示なので、cssがうまく認識されていないことが明らかでした。

原因は分かったので、ある程度の区切りまで一緒に進めて、そこで個別にフォローすることになりました。

 

しかし、同じファイルをみんなで使っているのに違う結果になることがあるので、こういうところがwebのハードルが高く感じるゆえんですね。

原因がわかればいいですが、全くの素人だと、

「あ、もう無理」

となってしまいますよね。

 

これを乗り越えるためには、結局類型を覚えるために数をこなすしかないのですが、数をこなせるようになるには、応用ができるだけの基礎が必要ですから、そこをきっちりと教えることが、このワークショップの本当の目的でもあります。

 

なので、ワークショップの冒頭では、

「このワークショップでは、webサイトを作れるようになる事はもちろんですが、自分で勉強できるようになる、自走できるようになることが、大きな目的の一つです」

とお話しています。

 

10.ワークショップ当日③:一気にビジュアルが変わって、思わず歓声!

そして、一段落したので、最初にアップしたcssファイルの中身を改めてコピペしてみると、無事に画面に装飾が施され、事前に見せたサンプルサイトの見た目に変わりました!

 

おおっ!という感嘆の声が上がります。

 

参加者の目を見ると、目がキラキラしているではありませんか!

 

それまでは、この先のプロセスについていけるのか、若干心配そうな目をしていましたが、画面が変わった途端、おもちゃを与えられた子供のような目に!(笑)

 

そうなんです。webって、おもちゃみたいで作れると楽しいんですよね!

この感動を、多くの非ITの人にも知ってもらいたいと思う出版人でした。

 

11.ワークショップ当日④:自分でもできるんだと実感できた瞬間

最期にhtmlとcssphpの本質的なところをお話し、自分で勉強+他の事例を参考にする方法をレクチャーし、無事に(?)ワークショップが終わりました。

 

素人に5時間、webの初級~中級の知識を詰め込むワークショップですので、みなさん疲労困憊です。

ですが、webサイト作成のなんたるかの基礎と、全プロセスの載っているマニュアル、それにひとつ作り切ったという経験で、とりあえず全てはわからないながらも、自分でもできると実感できるところができたようでした。

 

ワークショップを受講する前は、完全に右も左もわからない状態だったのが、なんとか自分で立つところまで持って行けたのではないでしょうか。

もちろん、立って歩けるようになるためには、その後に自分で勉強・練習することが不可欠ですが、きっとできるようになるはずです。

 

なぜなら、そのために必要な武器はすでに持っているのですから(ドヤ顔)。

 

12.アンケート結果はまずまず!

気になるアンケートは、ありがたいことにまずまずで、今後の展開についても関心をもってもらえたようでした。

少しでもみなさんのwebの壁を突破するお手伝いができていればうれしいです。

 

アンケートから、今後どのようなことをやっていけばいいかも知ることができましたが、今はもっと、このワークショップの参加者を増やして、少しでも多くの人に自分でwebサイトを作成し、思うような展開をwebでしていけるような環境を作っていきたいと、ますます意欲が燃えてきました。

 

13.今後もこれを続けていきたい!

このワークショップは、なかなか思うような情報を得られない+情報が素人にはわかりにくいという、webを勉強する環境への怒りも、開催したモチベーションのひとつでした。

2020年には、小学校でもプログラミングの授業が導入される今、本当は、車の運転と一緒で、どんな人でもwebやプログラムを操れるはずのツールだと僕は思っています。

 

なので、本業の出版とは直接的には絡みませんが、社会的な意義も含め、しばらくはこのワークショップをつづけ、一人でも多くの中小企業の経営者や非IT系のweb担当者の方をサポートし、webやプログラミングの知識を、安く短期間で提供していきたいと考えています。

 

将来的には、発注者の視点に立った、非IT系業種とIT系の業種のマッチングサービスなんかができるようになればいいなと考えています(どなたか一緒にやりませんか?)。

 

もし、このワークショップに関する意見(愛のあるもの限定で(笑))や質問などがありましたら、お気軽にお声掛けください!

 

それでは、またお会いしましょう!

レンタルサーバの申し込み手順を1ページごとに解説!~さくらインターネット編~

こんにちは!

非IT業界の出版社でIT部門を担当している岩本と申します。

今回は、レンタルサーバを借りる際の申し込みに関して、手順を解説していきます。

 

前回、ロリポップでの借り方をご説明させていただきましたので、

今回は、さくらインターネットでの借り方です。

 
【前回記事:ドメインについての解説もあるロリポップ編】

 

it-support.hatenablog.com

 

基本的な流れは前回までと同様になります。

ワードプレスを使ったブログ作成を始めてされる方や

私と同じ非ITのweb担当者の方々が申し込みを完了できるように、

実際に表示されるページ順に全て紹介します。


別のウィンドウでこちらのページを開きながら、一つ一つ進めて貰えると、安心してお申し込みできます!

 

それでは、さくらインターネットのサイトへいきましょう!

 

 

さくらインターネットレンタルサーバをお申込みする場合

sakura-manual

 

 【申し込み完了までの流れ】

  • ①契約プランを選択
  • ②個人情報を入力
  • ③申し込み完了

 

まずは、さくらインターネット レンタルサーバと検索し、サイトに入ります。

www.sakura.ne.jp

 

※「さくらインターネット」とだけ検索して入った場合は、メニューにある「レンタルサーバ」の所をクリックしてください。

 

トップページに入ったら、「お申込み」のボタンをクリック

 

f:id:it-support:20180502162536j:plain

 

そうすると、プランの選択画面になります。

 

①契約プランの選択

 

sakura-manual

 

「サーバのプラン」と言われても、そもそもよく分からないなぁ…という方は、おススメ通りにスタンダードプランで!

 

sakura-manual


その下にあるドメイン名ですが、まずドメインって何?」という方は、

前回記事へ!
 

it-support.hatenablog.com

 

とりあえず、適当でもいいよという方は、飛ばして次へ進みましょう~


さて、ドメイン名の入力ができましたら、「お支払方法の選択」をクリックしてください。

 

f:id:it-support:20180502182948j:plain

 

…とここで、次のページに行く前に、さくらインターネットの会員認証」のページが出ます。

 

②個人情報を入力

 

f:id:it-support:20180502184218j:plain

 

各項目を入力したら、確認画面が出ます。

 

sakura-manual

 

登録を完了するとこういう内容のメールが届きます。

 

f:id:it-support:20180502184311j:plain


会員登録が完了したので、次に進みプランに対しての支払い選択のページへ向かいます。

sakura-manual


選択する箇所は2つ。

 

  • 支払いパターン
  • 支払い方法

 

「支払いパターン」では、「月払い」か、「年間契約」かを選びます。

「支払い方法」では、「クレジットカード」「銀行振込」「請求書払い」のいずれかを選びます。

 

ここで、「他のレンタルサーバも使ってみたいし、お試し利用だけしてみるか…」という方には、気を付けておくべき事が一つあります。

sakura-manual


クレジットカードで登録すると、そのまま本契約になります

他の契約方法に関しては、そういったことはありませんので、お試ししたい方は、クレジットカード以外を選びましょう

 

ただし、お試しを経て、さくらインターネットで使いたい!」と決断した方は、クレジットカードでの契約をお勧めします

なぜなら、支払い方が楽な上に、支払い手数料が無料になるからです。

 

両方とも選択し終えたら、あとはこれまでの情報の確認画面が出ます。

 

③お申込み完了!

 

sakura-manual

 

内容を再度確認後、「同意する」にチェックを入れ、「この内容で申し込む」をクリックすれば、完了です!

 

sakura-manual

 

すると、申し込み受付完了メールが届きます。

 

f:id:it-support:20180509184311j:plain

 

その後、仮登録完了メールが届きますので、ちゃんと使えるどうかの確認をしましょう。
メールに書かれている「コントロールパネル ログイン情報」にあるURLをクリックし、ログインしてみます。

 

sakura-manual

 

f:id:it-support:20180509185225j:plain

 

メニュー画面であるコントロールパネルの画面に移りました。

f:id:it-support:20180511174139j:plain

これで登録は完了です!
お疲れ様でした!

次回はエックスサーバー編です!