リセットCSS×メディアクエリ

Twitterからこのページに来ていただいた方は、
いつも私のツイートを見て頂きありがとうございます。

検索からこのページに来て頂いた方、始めまして。
みつか@福井のひとり親エンジニア(@Mityu_ka)と申します。

このページでは、実装スピードをちょっとでも速くするCSSフォーマット(add-style)を提供しています。
私はWordPressのテーマ作りがメインですが、Web制作の環境づくりって大事です。

良く使うリンク集だったり、開発環境をじぶん好みにカスタマイズしておいたり。
そういうひと手間がちり積もで差になります。

・リセットCSS
・デバイス毎のメディアクエリ

この2点だけを記述(コピペ)したデータではありますが、
プログラミングを学び始めた3年前の私なら分からなかったことでもありました。

だからこそ、シンプルなデータですがダウンロードして頂いて、
どんどん使ってください。

ダウンロードはこちら⇒add-style

Web制作に「ゲーム理論」が必要な3つの理由とは?

Web制作に「ゲーム理論」が必要な3つの理由とは?

・ユーザーとスタッフ、そして同業者を巻き込むため。

・ユーザーの選択肢を(あえて)限定するため。

・サイトを作って終わりにしないため。

この記事では「マンガでやさしくわかるゲーム理論」から、

・”Web制作にゲーム理論が必要だと考えた3つの理由

・3つのそもそも

についてまとめながら解説していきます。

では、“Web制作にゲーム理論が必要だと考えた理由の1つ目についてです。

「ユーザーとスタッフ、そして同業者を巻き込むため」

この理由の根拠は、

熱量を伝えるべきプレイヤーをゲーム理論で明確にすべきだからです。

ユーザーは当然だけど、スタッフと同業者を巻き込むのはなぜ?

スタッフの熱量はユーザーに伝わり、同業者を巻き込むことで空間を拡大させるためです。

“仕事だから熱量っていらないよね”

と思うかもしれませんが、

やらされてる感のあるお店ってユーザーとの距離感が遠いのです。

商品やお店への愛情はないので、事務的というか作業でしてると感じます。

スタバのように忙しいながらスタッフも楽しんでいる空間づくりをしているお店はユーザーというよりも、友達に会いに行くような感覚になることすらあります。

Web制作の評価はアクセス数や売上&利益といった数字で評価されます。

けれど、制作する前には必ずお店のオーナーの想いや要望を伺います。

「ユーザーに愛されるサイトにしたい」

「ユーザーが繋がり、生活を充実する手伝いができるサイトにしたい」

などです。

結果は数字ですが、その過程には「想い」という抽象的な要素があるからです。

これはWeb制作に限らずマーケティングやブランディングにおいても同様です。

「この商品に対してどのようなイメージ戦略を立てていくか?」

感覚を言語化して商品や企業の事業の方向性を決めたりもします。

巻き込む=「熱量」と言えるかもしれません。

抽象的なことは評価されにくいし、あいまいだからこそ、熱量を伝えるべきプレイヤーをゲーム理論で明確にすべきだと言うのが理由です。

「ユーザーの選択肢を(あえて)限定するため」

ゲーム理論はプレイヤー毎の選択肢を明らかにするために役立ちます。

では、選択肢は多いのと少ないの、どちらが良い結果が出ると思いますか?

答えは少ない方が良い結果が出ます。

と言うのも、行動経済学の分野を研究しているコロンビア大学ビジネススクールの教授であるシーナ・アイエンガーさんがジャムを販売するお店で実験した結果がもとになっています。

A:24種類のジャムを販売する場合

B:6種類ねジャムを販売する場合

この2パターンでの結果は以下の通りでした。

※比較する項目は来店率と購入率です。

Aの来店率は60%、購入率は3%

Bの来店率は40%、購入率は30%

仮に100人のお客さんがいたとすると、

Aの購入者数は1.8人。

Bの購入数は12人。

これほどの違いが出たそうです。

商品や場所、国民性など考慮すべき点はありますが、選択肢があると迷ってしまって買わない経験をしたことありますよね。

だからこそ、

ユーザーが欲しいかつ利益率の高い商品に絞って販売する。

そのための取りうる選択肢をモレなく考えるためにゲーム理論が必要です。

「サイトを作って終わりにしないため」

サイト作りはお金も時間もかかります。

だからこそ、ムダにしたくない。

そのために周りを巻き込み、選択肢を提供し、利益に繋げなきゃ作る意味ないですよね。

先行投資は必要だけど、利益をいつ回収するのか?を見積もっておく。

選択肢によって起こり得ることと、

そこから得られる利益を計算して、

サイト作りの結果を評価するプランを立てるためにもゲーム理論を使いたいところです。

そもそも1:

なぜ「ゲーム理論」を学ぼうと考えたか?

ぶっちゃけると”知らなかったから”です。

この本はマンガだし、とっつきやすいと言う理由もありました。

そもそも2:

「ゲーム理論」とはなにか?

「ゲーム理論」とは、利害が対立する者同士の関係や駆け引きを分析するツールで、”有形””無形”を問わず、商品を販売する際に抜けがけさせない環境を作るための理論。

この本の舞台にもなっている炭鉱町にある温泉街で宿泊施設を営んでいるオーナー達の行動がゲーム理論を学び変わっていきます。

・薄利多売になっても良いと値下げする

・全体で決めたことから抜けがけする

・やっても無駄だと協力しない

どこでもあり得ることですよね。

そもそも3:

なぜWeb制作に必要だと考えたのか?

Web制作を大きく2つに分けられます。

・依頼を受けてサイトを制作する。

・自分のサービスを作る。

でも、なぜ温泉宿の話がWeb制作につながるのか?と疑問に思ったかもしれません。

けれど、

「ユーザーを増やし、利益を上げる」ため

薄利多売では限界があります。

小さな街では単独で出来ることには限界があります。

何もないと諦める人達がいます。

ぶっちゃけサイトを作った瞬間から売上と利益が右肩上がりにはなりません。

何故なら、他にもあるから。

Web制作も同様で、サイトはあって当たり前の時代だからこそ、作って終わりにしないための計画が必要だと考えています。

私が住む福井のように人口が少なく、一人当たりの所得が低い街では単独で勝負するよりも商店街や同業者で協力関係を築く方が集客力があります。

事実、単独でイベントをするよりも、フリマやケータリングも祭りなどに出店した方が稼ぎやすい。

これはゲーム理論とは違いますが、

「個別の店は知らないけど、イベントでたくさんの店があるなら行ってみよう」

という、イベントの強みを選択肢としてプレイヤーであるユーザーに提供してるから。

Web制作の目的は集客し、ファンを作り、利益をアップさせるためです。

場所によって取るべき選択肢は微妙に違うかもしれませんが、

イトを持っているお店は多い。

そして、商品も独自性のあるものばかりではない。

そんな時に、プレイヤーが最も利得の多い選択肢をサイトで提供する。

Web制作を経験して実感したことが、

「自分たちがどうしたいか?」が周りを巻き込んだ施策を作れば”濡れ手に粟”の状況が作れますよね。

福井のように個性のあるお店が少ない地域だと、独自性のある商品を販売できるお店は少なく、オプションプランやお店の人柄、値引きでしか勝負できないお店も多いのが現状です。

私は経理の仕事もしているので、安易に利益を削る危険性を痛感しています。

じゃあ値上げをすれば

私のようにWeb制作をする側も、携わったお店が繁盛して継続した仕事になることが理想です。

なので、作って終わりじゃなく繁盛するお店作りのサポートができるのもWeb制作ならではだと考えてます。

そのためにはゲーム理論が重要だと読み終えて感じました。

温泉宿をテーマとして、それぞれの考え方を踏まえつつ、ひとり勝ちするのではなく全体が勝つための方法をゲーム理論で考えているフィクションです。

この本の中で特に印象に残っているのが、

「いくら正論でも、協力すべきだって善意に訴えかけるだけじゃ弱いのよ。

抜けがけされて正直者がバカを見る。」の部分です。

これって商品を販売するときに限らず、会社の実務でも似た場面ありますよね。

と言うのも、やってみれば良い結果を生みそうだと感じても、今までのやり方を変えるのは心理的なハードルがあるからです。

そこをクリアできなければ、多少は不都合があっても1人が面倒だと抜けがけすると全体の協力は得られにくい。

さらに、Web制作の場面でも同じことが言えます。

と言うのも、商品情報をサイトに入力する場合、今までと違うやり方に難色を示してしまい、作ったは良いけど3ヶ月もしないうちに使わなくなった…

なんてことも多々あるからです。

だからこそ、商品を販売する全ての人に「ゲーム理論」は必要です。

ゲーム理論の特徴

・問題を俯瞰する

・単純化して考える

問題をシンプル(単純化)に捉えると見えてくるもの

・様々な状況や分野に応用できる

・問題の典型的なパターンがわかる

・視野を広げやすくなる

どういう人や場面で役立つのか?

仕事(ビジネス)で応用できる。

と言うのも、複雑な利害関係や相互依存関係に溢れているから。

本書のゴール

ゲーム理論をビジネス上の様々な問題解決に活用すること。

複雑な状況の中から、プレーヤー、戦略、利得という3つの要素だけを取り出し、状況を単純化して理解できる。

そして、「コーディネーションゲーム」でアクションを起こして、

悪い状態を抜け出すことができる。

問題を改善するためには習慣を疑うことも必要。

「囚人のジレンマ」とは?

→多くの人が自分の利益だけを考えて行動するために全体としては望ましくない状況になってしまうこと。

「囚人のジレンマ」を実際に使うために考えるべき3ステップ

1.「プレイヤー」を特定する。

2.各プレイヤーの「戦略」を特定する。

3.各プレイヤーの「利得」を考える。

・プレイヤーを考える目的:

与えられた状況で最も重要な人を特定するため。

・戦略を考える目的:

プレイヤーがとり得る選択肢を特定するため。

・利得を考える目的:

ゲームの構造を可視化するため。

囚人のジレンマへの対処法とは?

・善意に訴えるだけではうまくいかない

・お互いの行動が観察できる長期的な相互依存関係をつくりだす。

・ルールを変える。

なぜ「善意に訴えるだけではうまくいかなののか?」

それは、プレイヤーにとって最善の選択肢でなければ選ばれないから。

「他のみなさんの利益も考えてAの方法でお願いします!」と訴えられて、

Aの方法を取れば10の利益を10年間全てのプレイヤーが得られるけど、

Bの方法を取れば100の利益を1年間自分だけが得られる。

あなたならどちらを選びますか?

皆のことを考えれば利益は10×10=100

自分のことを考えれば利益は100×1=100

結果として得られる利益は同じだけど、

全体利益を見るとプレイヤーの数だけ利益は増えます。

10年間状況が変わらない環境はまれかもしれませんが、

将来のことは誰も分からないからこそ

現状を踏まえて考えることは大事ですよね。

この一番の問題は自分が生活するためには100の利益が必要な場合です。

と言うのも、利益を10に抑えれば自分だけでなく周りも利益が得られると

分かっていても、じゃあ不足する90の利益をどうやって補うのか?ということです。

利益が10になる分、必要な労力も10になるなら理解も得られやすいでしょうが

労力は100から変わらないけど利益は10だと難しいですよね。

大抵はお金がからむ場合が多いはずだし、生活もかかっているからこそ

「善意に訴えかけるだけではうまくいかない」理由が納得できます。

それに労力や経費の面を含めて考えるのが「プレイヤーの利得」とするなら、

他者視点も重要になってきそうです。

「お互いの行動が観察できる長期的な相互依存関係をつくりだす。」

「コーディネーション」とは?

協調・調整のこと。

皆が協調して同じ行動をとることで皆が得するような状況のこと。

「ルールを変える」

まとめ

ゲーム理論を学んで身につくこと

・自分と他人を含めた相互依存の関係を俯瞰

・問題の全体像を把握できる

・空間的な視野を広げて問題の構造を捉える

ゲーム理論の応用

・ゲームに勝てないならルールを変えてしまえばいい。

ゲーム理論とは?

^_^コーディネーションゲームとは?

天才→絶望感ループの繰り返し

今日はこのツイートが元ネタです👇

なぜこのツイートを深掘りしようと考えたか?

それは、出来ないのはあなただけじゃないと伝えたいからです。

今でこそWordPressの独自テーマを自作できるようになりましたが、

ここまで3年もかかりました。

早い人だと1年で実装できるようになるので、

私は決して優秀なエンジニアではありません😅

でも、そんな私だからこそ、

「出来ないのはあなただけじゃない!」と伝えられます。

HTMLすらまともに理解していないままWordPressに取り組み、

当たり前のように挫折しては何度も取り組む。

Hello Worldを表示できて喜んだの束の間、CSSすら理解できなかった私…

多分ですが、この記事を読んでくださっているあなたよりもポンコツです😥

けれど、めちゃくちゃ諦め悪く3年続けました。

ぶっちゃけプログラミングには向いていないのかもしれません。

でも、やりたいと続けてきました。

何よりも、理解できなくて挫折したとしても誰かに迷惑をかける訳じゃない。

それが続ける大きな理由だったように思います。

私もそうですが、結果はすぐに出たほうが嬉しいですよね。

でも、プログラミングは精神力の強さも求めてきます。

「やる気があるのは分かったけど、耐えれる?

HTMLにCSSは簡単だって思ってるかもしれないけど、割と難しいよ?」

プログラミングの神様がいるならそう言ってるかもしれません。

あなたが何のためにプログラミングをするのか?

その理由が明確で強い動機が必要です。

大した実力もない私がこんなに偉そうに言えるのは「続けてきたから」。

挫折率90%と言われるプログラミングを3年も続けてきた実績は揺るぎない事実です。

だから、あなたに強い目的や目標があって苦しみながらプログラミングに取り組んでいるなら「諦めないで」と言いたい。

ぶっちゃけ取り組む人が少ないほど私が頂ける仕事は増えます(笑)

でも、現状を変えたくて始めたプログラミングで少しずつ人生が変わったからこそ、同じように頑張るあなたを応援したい。

コードの実装が1つ出来たと思ったら、エラーで心を折ってくるプログラミングに絶望感ループを味わいながら、今日も諦めずに続けましょ。

ここまで読んで下さってありがとうございました^^

「複業するなら徹底的にスキマ時間を使うべき3つの理由」

こんにちは、福井のひとり親エンジニアのみつかです。
今日はこのTweet👇をもとに、
複業するなら徹底的にスキマ時間使うべき3つの理由について深掘りしていきます^^

目次
・帰宅してからの積み上げ時間はどれくらい?
・昼型?それとも夜型?
・作業か?じっくり考えることか?
・まとめ

最初に結論はこれ👇
ズバリ、
仕事から帰宅して実装は大変だからです😅

本業で朝9時から夕方6時まで仕事して、
帰宅したら家事や子供との時間。
そして、夜9時から12時まで積み上げを開始。

時間でいうと3時間ですが、
ノッテくるまでの時間だったり、
そこから実装や商品づくりは割と大変です💦

だからこそ考えをまとめたり
パソコンなしで出来ることはスキマ時間にしておくってかなり大事です。

「たしかに!」と感じましたか?
とは言え、実行するには少しテクニックが必要なので、1つずつ解説していきます^^

帰宅してからの積み上げ時間はどれくらい?

ここは個人差がありますが、
「2~3時間/日」だとすると1週間で14~21時間、1ヵ月で64~91時間にもなります。
数字を見ると、1日1時間の差をかなり感じますよね。

でもプログラミングは時間じゃない!
って言う意見も確かにあるんです。
と言うのも、大事なのは実装することだから。

とは言え、学び始めはとにかく時間がかかります。
それこそPHPの変数1つでも…
分からないからググるとまた分からない言葉が…
その言葉をまたググる。
分からないのループになるので、
集中して取り組む時間が必要なんです。

でも、複業だとまとまった時間が少ないので
スキマ時間で実装のポイントを考えるクセが大事って訳です。

つまり、「帰ったらコードを書くだけ」の状況をいかに作れるか?が大事になってきます。

しかも、
疲れているとどうしても頭が働かないので、
日中のまだ疲れていない時間帯に
最も頭を使うことをしておく。

そうすると帰ってからの作業が楽になります。
もし実装できなくても、
やることが定まっているだけで進捗は段違いです。

ホリエモンさんの著書「最強の超習慣術」でも、小さなタスクを準備しておいて、スキマ時間を使って処理していくべき!だとおっしゃってます。
どんな人でも1日24時間は変わらない。
無駄にせず成果を出すために1分1秒を大切にしている事実から私たちが学ぶことは多いです。
※ホリエモンさんの著書のリンクはこちら

昼型?それとも夜型?

昼と夜、どっちが集中できますか?

日勤だと強制的に昼に集中しなきゃいけないですが、
試験勉強とかを思い出してみて欲しいのです。

太陽が昇ってると遊びたくて集中できないけど、夜になるとグッとはかどる。
それは確実に夜向きですよね。

一方で夜はすぐに眠くなるから昼の方がいい!ってパターンもありますよね。

つまり、
自分の得意パターンが分かると強いんです。
得意パターンが分かるメリットの1つが、
「習慣化できること」です。

ネットや本屋で”習慣の作り方”の情報を沢山見ますよね。
それってつまり、習慣化するのが大変だから。

「昨日は頑張ったから今日はサボってもいいよね?」
とか、
「今日疲れたから明日から頑張ろう」とか。

風邪ひいたり、どうしてもダルい日はあるけど
やるやらないを自分と交渉してしまうと続かないと実感してます。

だからこそ、
私は夜の方が作業に向いていて、
昼は考えることに向いてます。

これは自分なりに試して分かることなので、
色々と試してみてください。

そのときのおススメは「ポモドーロ」です。
“25分作業したら5分休む”を繰り返します。
YouTubeで”ポモドーロ”と検索すると見つかるので、お気に入りを探してみてください^_^

作業か?考えることか?

サイトを作るならパソコンが必要だけど、プランを考えるならパソコンは使いませんよね。
日中にフルタイムの仕事をして、帰宅してからプログラミングをしていたとしても
昼休みや仕事の合間の休憩など探せば以外とスキマ時間ってあるものです。
つまり、考える仕事ならパソコンはいらないのでスキマ時間を活用するって訳です。
したいことは「作業」と「思考」のどちらかという分類によって、
取り組むタイミングを”ふるいにかける”と、限られた時間で最大限の成果を出せると実感しています。
なぜここまでするのか?をもう一度振り返ると、「時間が限られている」からです。
私のようにひとり親として複業をしている方だけでなく、1日24時間で出来ることを増やしていくのは時間をムダにしないためにも身につけたい時間術です。

まとめ

帰宅してから積み上げをスタートするのは大変。
昼型と夜型どちらに向いているかを知って、習慣化する。
集中する環境をポモドーロで作る。
スキマ時間を使って先に考えておく。

独学でプログラミングを学ぶなら、模写コーディングをすべき3つの理由

独学でプログラミングを学ぶなら、模写コーディングをすべき3つの理由

目次

  1. 理由1:「作りたいサイト=ニーズがあるサイトではない」
  2. 理由2:「独学の問題点は、完成させられない」
  3. 理由3:「実力にバフをかけられる」
  4. まとめ

最初に

私は「本→ドットインストール→Progate」と独学でプログラミングを学びつつ、
クラウドワークスで5件ほど営業をして気付いたことが、「基本だけではダメ」でした。
この「基本から抜け出して受注する」方法の1つが”模写コーディング”です。
「独学でプログラミングを学ぶ人が、受注するまでのプログラミングの学び方」として、
模写コーディングをすべき3つの理由をまとめていきます。

結論

  • 模写コーディングで、ニーズのあるサイトが作れます。
  • ソースコードを使って、サイトを完成させる実力が身につきます。
  • 今は実力がなくても、模写コーディングで一気にバフがかけられます。

理由1:「作りたいサイト=ニーズがあるサイトではない」

プログラミングを学ぶのは、「稼ぐため」。
だったら、お客さんにニーズのあるサイトを作ることが必須ですよね。
と言うのも、自分が作りたいサイトが必ずしもニーズがあるとは言えないからです。
学ぶことが目的なら好きに作ればいいけど、稼ぐための「ニーズのあるサイト」を理解するために模写コーディングが必要になります。

理由2:「独学の問題点は、完成させられない」

これは私の問題点かもですが、「完成させられない」ことが悩みでした。
と言うのも、本などを見て作っていてもなぜか出来ない…。
初心者であるほど、ググっても完成できません。
何が問題で、何が正解かが分からないからハマってしまうんですよね(-_-)
(3年学んできた今でも、ハマって悩むことは変わりませんが…)

理由3:「実力にバフをかけられる」

ゼロからプログラミングの基本を学ぶと、分からないことが2つ出てきます。
・今の自分の実力が分からない。
・どういう風にサイトを作ればいいか分からない。
サイトやアプリを作るために学んでいるのに、積み上げることばかりに意識が向いてしまって、サイトを作り切ることが難しくなります。
一方で、模写コーディングは完成形を見ながら作りきることが目的です。
もし作り始めた時点でサイトを作り切る実力がなくても、
・マネしながら作るとサイト構成の考え方が分かる。
・サイトを作りきることで、一気に経験がたまって、実力にバフをかけられる。
「作りきる」経験を一気に積めるのが模写コーディングの最大の長所です。

まとめ

私は「本→ドットインストール→Progate」と独学でプログラミングを学びつつ、
クラウドワークスで5件ほど営業をして気付いたことが、「基本だけではダメ」でした。
この「基本から抜け出して受注する」方法の1つが”模写コーディング”です。
模写コーディングをすることで
・模写コーディングで、ニーズのあるサイトが作れます。
・ソースコードを使って、サイトを完成させる実力が身につきます。
・今は実力がなくても、模写コーディングで一気にバフがかけられます。
あなたが「独学でプログラミングを学ぶなら、模写コーディングをすべき」です。

WordPressでJavaScriptが読み込まれない時の3つの注意点

WordPressでJavaScriptが読み込まれない時の3つの注意点

 

WordPressのカスタマイズや、自作テーマを作ったりしていると
Carouselやボタンアクションなど独自の機能を追加したくなりますよね。

この記事では、

  • どこにJavaScriptファイルを読み込めばいいか分からない。
  • WordPressのテーマにJavaScriptファイルを読み込めない。
  • 設定したファイルが読み込まれているかを確認したい。

こんな悩みを抱えている方に向けて書きました。

目次

  • どこにJavaScriptファイルを読み込めばいいか分からない。
  • WordPressのテーマにJavaScriptファイルを読み込めない。
  • 設定したファイルが読み込まれているかを確認したい。

結論

  • テーマフォルダの中にあるfunctions.phpでJavaScriptファイルを読み込む。
  • wp_enqueue_scriptを使う。
  • デベロッパーツールのSourcesにJavaScriptファイルを確認する。

どこにJavaScriptファイルを読み込めばいいか分からない

WordPressを使い始めた頃に悩むことの1つが、
どこにJavaScriptファイルを読み込むか?ですよね。

 

この画像は#underscoresという、WordPressの自作テーマ用ファイルですが、
wp-content\themes\[テーマ名]\functions.phpにJavaScriptを読み込ませます。

WordPressのテーマにJavaScriptファイルを読み込めない。

そして、
functions.phpにこのように記述するとJavaScriptファイルを読み込めます。
※ハイライトした個所です。


[my_blogsite-addslider]と[‘/js/addslider.js’]の箇所は、
お使いの環境に合わせて変更してください。

設定したファイルが読み込まれているかを確認したい。

画像1⇒画像2の順番に進むと、設定したファイルが読み込まれているかの確認ができます。

画像1

画像2


WordPressにJavaScriptファイルを読み込む時に、
私が少しつまづいたのでまとめました。