現在時刻との差(diff)を取得する

public function getDateDiff(string $datetime): string
{
    $now    = new \Carbon\Carbon();
    $target = new \Carbon\Carbon($datetime);

    $diff_seconds = $now->diffInSeconds($target);
    if (0 <= $diff_seconds && $diff_seconds < 60) return '1分前';

    $diff_minutes = $now->diffInMinutes($target);
    if (1 <= $diff_minutes && $diff_minutes < 60) return $diff_minutes . '分前';

    $diff_hours = $now->diffInHours($target);
    if (1 <= $diff_hours && $diff_hours < 24) return $diff_hours . '時間前';

    $diff_days = $now->diffInDays($target);
    if (1 <= $diff_days && $diff_days < 7) return $diff_days . '日前';

    $diff_weeks = $now->diffInWeeks($target);
    if (1 <= $diff_weeks && $diff_weeks < 4) return $diff_weeks . '週間前';

    $diff_months = $now->diffInMonths($target);
    if (1 <= $diff_months && $diff_months < 12) return $diff_months . 'ヶ月前';

    $diff_years = $now->diffInYears($target);
    if (1 <= $diff_years) return $diff_years . '年前';

    return $target->format('Y-m-d H:i:s');
}

60秒以内のものは「1分前」としています。 下記のように書き換えれば「10秒前」のような表示ができます。

if (0 <= $diff_seconds && $diff_seconds < 60) return $diff_seconds . '秒前';

ご自由にお使いください。

PHPCarbon
プログラミングをするパンダ
プログラミングをするパンダ (@Panda_Program)
Software Engineer

プログラミングをするパンダ(@Panda_Program)と申します。以前、プログラミングに慣れてきた初心者の方向けに、このような記事(プログラミングに慣れてきた初心者が、まず1つ目のサイトをHTML&CSSで作る時に意識するべき3つのこと

今回の記事の対象者は、もちろんプログラマの方々です。 特にこのような方に為になると思います。

新しいプロダクトを生み出したいが、人の真似のようなアイデアになってしまう方
「ぶっちゃけ、海外とかイケてるサービスをパクればいいんでしょ?」と考えている方
起業を考えているが、投資家に「そのアイデア、生き残れるの?」といわれても、それを実現させる熱意のある方

今回は技術的な内容よりも、サービスを作るための戦略的な方針をメインに書きました。「ZERO to ONE」という本はサービス開発をしたいプログラマの視点を高めてくれる本なので、最後までお付き合い頂ければ幸いです。

「ZERO to ONE」。この本の著者はピーター・ティール。ペイパルの創業者にして偉大な投資家です。フェイスブックの最初の投資家としても知られており、シリコンバレーにもファンは多数存在しています。Google出身でVue.jsの作者(2017年にGitHub上でReactよりも数多くのスターを獲得したJavaScriptのライブラリ)のEVAN YOU氏もこの本を読んでいます。

https://twitter.com/Panda_Program/status/995502053924392963

この本はベンチャーの起業家に向けて書かれた本ですが、プログラマにとっても大切な学びがありました。今回は、プログラマ視点から、彼の著書のエッセンスを抜き出してご紹介します。

以下は目次です。

①一番大事なことは「隠れた真実」を見つけること
②競争を避けて、市場を独占できるオリジナルなものを作る
③人生は「宝クジ」じゃない

①一番大事なことは「隠れた真実」を見つけること

この本の冒頭はこのように始まります。

採用面接でかならず訊く質問がある。「賛成する人がほとんどいない、大切な真実はなんだろう?」

そして、その正しい答えは、このような形になるとピーター・ティール氏は言います。

「世の中のほとんどの人はXを信じているが、真実はXの逆である」

この一節を読んだ時、僕は人工知能の生みの親であるジェフリー・ヒントン博士の映像インタビューを思い出しました(「大工になりかけた人工知能の生みの親」ブルームバーグ)。彼は人工知能をコンピューターに実装する研究を始めた頃、誰もAIが完成すると信じていなかった故に、就職すらできなかったのです。

(映像より抜粋)

研究を続けるうちに、AIが段々と形になり、実用に耐えるものになっていったことがインタビューでは説明されています。Googleの音声認識技術は、彼の研究室の出身者が改良に貢献し、製品に組み込まれたそうです。

今やAI関連のニュースを耳にしない日はなく、我々の日常生活にも欠かせないものになりつつあります。インタビューはこのように締めくくられます。

つまり、ヒントン博士は一貫してこのように考えていたのです。

「世の中のほとんどの人は人工知能の実現が不可能であると信じているが、真実はその逆である」

これこそ、「隠れた真実」の好例だと思います。 また、現代のシリコンバレーを見ると、このような例は枚挙にいとまがありません。例えば、下記のような例が思いつきます。

世の中のほとんどの人は 「自動車の燃料はガソリン」 であると信じている
世の中のほとんどの人は 「ロケットは使い捨て」 であると信じている
世の中のほとんどの人は 「人間が住めるのは地球だけ」 であると信じている

この3つはイーロン・マスク氏(Xドットコムを立ち上げ、後にティール氏のペイパルと合併した)のビジョンです。彼は、自動車の動力を電気にすることが可能であると考えて、テスラ・モーターズを立ち上げ、電気自動車を作りました。また、ロケットは再利用可能だと考えてスペースXを立ち上げ、打ち上げ後、地球上で指定した位置に帰ってくるロケットを作りました。人類の火星への移住も本気で考えているともマスク氏は主張しています。また、彼は 「地球上で飛行機よりも早く移動できる乗り物がある」 と信じている為に、ハイパー・ループ構想を打ち出したのだと思います。

このように、人々が無意識に信じている習慣・常識や、実現が不可能だと思っていることは、実は覆すことができるという考え方を持つことが重要なのです。これこそが「隠れた真実」を見つけることに他なりません。 そのように考えると、子供の頃に読んだ天才たちの伝記も、「隠れた真実」を見つけた人たちのストーリーというように解釈することができます。

ただ、これはプログラミングと無関係ではないかと思われる方もいらっしゃるかと思います。イーロン・マスク氏のように全く新しいモノで世界を変えるビジョンを持ったり、エジソンのようにあらゆる素材を試して電球を発明することは、我々プログラマの本分ではありません。しかし、我々プログラマも、「隠れた真実」を見つけ、それをプログラミングで実現・解決することはできると僕は思います。

例えば、シリコンバレーでいうと、Airbnbは「世の中のほとんどの人は旅行先で泊まるのはホテルだけであると信じている」という考え方を否定しました。Uberなら「世の中のほとんどの人は移動手段は他人の自家用車ではないと信じている」というものを否定しています。日本でいうとプログラミング学習サイトのProgateも、「プログラミングは難しいと人々は考えているが、実は誰にでも学べるスキルである」という信念の下にスタートしたのではないかと思います。

このように、プログラマでも「隠れた真実」を見つけることにより、アイデアひとつで世界を変えるプロダクトを生み出すことは可能であると僕は思います。

重要な概念
「隠れた真実」
世の中のほとんどの人はXを信じているが、
実際はXの逆であるということ

②競争を避けて、独占できるもの・オリジナルなものを作る

ピーター・ティール氏は、資本主義社会の基本概念である競争についても、隠れた真実を見つけています。彼はアメリカ社会は競争することは素晴らしいと教えているものの、実のところ競争は不毛だと喝破します。

これはティール氏の経験から生まれた考え方です。彼はスタンフォード大学の二年生として飛び級で入学し、ロー・スクールに通った後、アメリカの最高裁の判事を目指しました。本人は採用面接に手応えを感じていたものの、結果は不採用でした。彼は死ぬほど落ち込んだそうです。しかし、彼はそこから一つの知見を得ることができました。それは同じような環境で競争が発生した場合、結果を分けるのはほんのわずかな差でしかないということです。

また、彼はペイパルの前身となるコンフィ二ティという会社を運営している間、前述のイーロン・マスク氏と対立したことがあります。イーロン・マスク氏がXドットコムを立ち上げ、コンフィニティのプロダクトをコピーしていたのです。コンフィニティの社員はXドットコムを打ち負かそうと躍起になりました。あるエンジニアはXドットコムに投げ込む爆弾を設計したほどです。しかし、結局それは不毛な争いだったとティール氏は振り返ります。最終的にはティール氏とマスク氏は互いに握手をして、会社を合併することで決着がつきました。

似た者同士での間でこそ、「あいつとは違う」と互いの差異を強調します。しかし、他の人から見ると些細な差でしかないことは往々にしてあります。それは本当にクリエイティブな争いなのでしょうか。いや、そうではないとティール氏は言います。

では、競争は避けるべきだとすれば、いったい何をすればいいのでしょうか。それは、独占できるビジネスを見つけることです。

独占といっても、文字通りの独占ではありません。日本語でいうと「独自のもの」といった方が良いかもしれません。ティール氏は独占という言葉を使って、競争相手のいない市場で戦うことを勧めています。

例えば、グーグルはその売り上げの95%を「検索広告」に頼っているとそうです。Google ChromeはsafariやIEと、AndroidはiOSと、SurfaceとChrome bookは対立・競争します。しかし、検索分野で敵なしのGoogleは、検索広告でも圧倒的な優位性があります。これがティール氏の言う独占なのです。

また、ペイパル成功のきっかけとなったのは、イーベイ(アメリカのオークションサイト)の決済方法に採用されたことです。成功の始まりは、「イーベイで取引をすることで生計を立てている2万人」にペイパルを使ってもらうことだったとティール氏は言います。 当時のイーベイの決済方法はひどいものでした。しかし、ペイパルを使うと簡単に決済することができるので、イーベイのヘビーユーザーに試しに使ってもらうことにしました。すると、とても評判がよかったので、ペイパルがイーベイ全体の決済方法に採用されることになりました。ペイパルはイーベイのヘビーユーザーを独占したのです。

「競争を避けて独占する」ことの反対は、「多数のプレーヤーが市場で競争する」です。しかし、経済学の観点からは、「完全競争下では超過リターンはなくなる」と説明されます。 比喩的な言い回しになりますが、特定のパイを奪い合うよりも、パイを探し出して自分で丸ごと食べる、ということでしょう。ちなみに、グローバリゼーションも、特定の市場で世界中のプレーヤーが相手になるため、結局はパイを食い合うだけ、ZERO to ONEにはならないとティール氏は説明しています。

では、プログラマの視点からこの話を見ると、どのように解釈できるでしょうか。それは、「既存のサービスに改良を加えて、より良いサービスにしよう」、なんてことは考えない。或いはグローバリゼーションの観点からだと、「海外で流行っているサービスを日本で広める」ことをしないことになると思います。

上記のようなサービスは、一時期は経済的な成功を収めるかもしれません。しかし、自分が独占できるビジネスはそこにはありません。彼に言わせれば、ライバルのものを改良するなんてもっての外です。激しい市場競争に自ら参加するだけなのですから。そうではなく、「自分が市場を作る」という気概が、全く新しいサービスを生み出すことに繋がるのです。

「隠れた真実」を見つけて人々に広めると世界が変わる。本書のタイトルにもあるように、成功を収める全く新しいサービスは、「ZERO to ONE」なのです。

重要な概念
「競争を避けて独占する」
完全競争下では超過リターンは消滅する

③人生は「宝クジ」じゃない。

ティール氏の引用をする前に、アジャイル型開発とリーンスタートアップの概念を概説します。

「アジャイル型開発」はIT業界の大きなトレンドです。これは実装・改善を短期間で繰り返すことで、システムの最適化を目指す方法です。 見た目が変わったり、機能が頻繁に追加されるため、「システムが成長する」と喩えられることもあります。大規模な開発で行われるウォーターフォール型開発の場合は開発期間が数年単位になるのに対して、アジャイルの場合は、一度リリースしたあとは2週間や1ヶ月など比較的短期間にリリースを繰り返していきます。

「アジャイル」な仕事の進め方というトレンドはITに止まりません。弱冠26歳でつくば市の副市長に就任した毛塚さんも「アジャイル行政」をキーワードに掲げておられます。 実際に市民税課の業務にRPA(Robotic Process Automation)を導入しました。民間企業との共同研究の結果、「3カ月間で約116時間の削減、年間換算で約336時間の削減を見込めることが確認され」、なんと業務の削減率は79.2%にも上るそうです(茨城県つくば市、RPAの共同研究で大幅な業務量削減効果を確認)。

アジャイルという概念は「最小単位で試してみる」「走らせながら改善する」「まずはやってみる」という考え方と親和性があります。つくば市ではまず市民税課で導入したところ、別の課で「市民税課で好評だから、ぜひうちの課にも導入してほしい」という声が上がっているそうです。「まず実行してみて、それが上手くいけばさらなる最適化・大規模化をする」といった仕事の進め方は、今後業界の枠を超えたメインストリームなっています。

「まずはやってみて、改善を繰り返す」という手法がシステム開発における「アジャイル型開発」であるとすれば、この手法は起業論の文脈では「リーンスタートアップ」という考え方で説明されています。

「リーンスタートアップのポイントは、新たな事業を小さく始めて成功しそうかどうかを早期に見極め、芽がないと判断したら、すぐに製品やサービスを改良したり、事業の内容を一新したりして、軌道修正を繰り返すことにある。傷が浅いうちに進路を変更し、重傷を負って事業そのものが継続できなくなる事態に陥るのを防ぐためだ。こうしてチャレンジを続け、成功へと近づいていく」(「リーンスタートアップ」─小さな失敗を重ねて育てる

ピーター・ティール氏は、このリーンスタートアップの手法を否定します。 そこにはある視点が欠けているからだと彼は言います。それは、達成するべき目標です。つまり、「リーンスタートアップの方法を用いて、一体どんな会社を作るか」、アジャイルで言えば「この手法を用いて、一体どんなシステムを開発するか」の方がよっぽど重要だからです。 「リーンスタートアップの方法では、せいぜい出来上がるのは「iPhoneでトイレットペーパーを購入するための最適なアプリだ」とティール氏は述べています。

「アジャイル行政」を掲げるつくば市副市長の毛塚さんも、その点は認識されています。このため、彼は「COO(最高執行責任者)型の副市長」を目指すと述べています。COOはCEOの定めた経営方針や戦略を実行する役割を担います。CEOの役割はもちろん市長です。最も重要なことは、立案・実施させる政策の内容であって、アジャイル行政はあくまで決められた政策を実現する手段でしかないのです。

このような視点から、ティール氏は「どんなにひどい計画でも、無計画よりはいい」と説明しています。「隠れた真実」を見つけ、目標を立てることが重要なのです。「人生は宝クジじゃない」ので、「とりあえずやってみよう。数を打てばどれかは当たるだろう」という考え方は間違いなのです。

このことを彼はVC(ベンチャーキャピタル)の事業を例に挙げて説明します。曰く、「VCのリターンは正規分布ではなく、べき乗則である」と。彼の言葉を借りると、べき乗則とは「ひとつのもの、ひとつのことは、他の全てのことに勝る」という法則です。「VCの隠れた真実とは、そのファンドの投資案件の中で一番成功した案件のリターンが、他の案件のリターンの合計に匹敵するか、それを超えることだ」というのです。

投資の世界では、「卵を一つのカゴに入れるな」という比喩があります。投資の基本戦略は分散であると言われています。 卵は資金、カゴは投資先のことです。あるカゴの卵が割れても(投資先の会社が潰れても)、他のカゴの卵が無事であれば(損失が避けられれば)、トータルとして利益を出すチャンスが残る、という考え方です。ティールはこの考え方を否定しているのです。

これをプログラマに例えてみましょう。「今の世の中、新規のサービスに溢れている。また消費者は移り気だ。何が当たるかは誰にもわからない。まずは最小単位で色んなサービスを作ってみて、当たったものを伸ばしていこう。」こう考える方は少なくないはずです。

しかし、サービスを多数作ったとしても、結果は「べき乗則」に従うだけです。「ひとつのサービスは、他のすべてのサービスに勝る」のです。 実際、あなたが一日にLINE, Facebook, Twitterに費やす時間を計算して、その他の類似サービスに費やす時間と比べてみてください。メジャーなサービスに費やしている時間は圧倒的だと思います。

さらに付け加えると、自分自身は分散することができません。 自分が分身することは誰にもできません。多数のサービスを作ってリスクを分散しているように見えたとしても、その実、開発にかけた時間は消費されていく一方です。最小単位のサービスでも、開発には一定の時間がかかります。自分で自分に投資する一番の材料は時間です。リターンが高いか低いかわからないことに時間をかけるよりも、投資効率の高いことに自分自身の時間を使うべきだとティールは言います。

誤解のないように付け加えると、ティールは小さく始めることを否定してはいません。「無計画に始める」ことを否定しているのです。 その証拠に、彼は「どんなベンチャーも最初は小さい。なので、小さな市場を狙うべきだ。そして、その市場を独占するのだ」と述べています。ペイパルが狙ったイーベイのヘビーユーザーの数は2万人でした。

これをプログラマの視点から解釈すると、新しいサービスを開発しようとするプログラマであれば、「数打てば当たる」という発想を捨て、「べき乗則」を意識すること。簡単でもいいからサービス開発の計画を立ててみること。そのサービスは「隠れた真実」を人に広めるような設計であるとが肝心であるということになると思います。それが市場の独占につながるからです。

この章の最後に一つ小話を。私事で恐縮ですが、去年、自分は中国旅行のブログを運営していました。成功したブロガーの方は、まずたくさん書いてみること、そしてそれを続けることだ、といっています。その言葉に従って、初めは旅行期間のうち半日、あるいは1日で起きたことを文章に書き起こし、それを毎日アップする、という方法を取っていました。

ある程度書き続けているうちに、それまでに比べて反響の大きな記事をひとつ書くことができました。その結果、反響の大きな記事は読まれましたが、たったそれだけでした。他の記事は読まれませんでした。

結局2ヶ月ほど続けてみて、書くのをやめてしまいました。当時は、自分の旅行先がマイナー過ぎたから受けなかったのだと考えていました。しかし、今振り返ってみると、自分の記事が単に「べき乗則」に従っていたからだと納得しました。こういった反省を踏まえて、noteでは一つの記事に対する質をできるだけ高めようと思っています。

重要な概念
「べき乗則(冪乗則)」
ひとつのもの、ひとつのことは、他の全てのことに勝る

最後に

ある時、ピーター・ティール氏の投資ファンドであるファウンダーズ・ファンドのサイトにある一節が掲げられました。

「空飛ぶ車を夢見ていたのに、手にしたのは140文字だ」

140字とはTwitterのことですが、おそらくSNSをこの言葉に代表させたのだと思います。ティール氏は上場したフェイスブックの株を早々に売り払いました。おそらくフェイスブックの成長性に疑問を抱いたのではなく、ただ、彼が望んでいた未来がそこにはなかったからだと思います。

ティール氏の起業の視点は「ちょっといい未来」ではありません。彼は、「米ドルに代わる新たなデジタル通貨を作るという使命」を持ってペイパルを作り上げました。

それはまるで子供の夢想のようでもあります。しかし、この夢の見方を変えてみましょう。「100年後、世界ではどのようなテクノロジーが使われているか」。すると、現代の視点からだと突拍子も無いアイデアも、信じることができるのでは無いでしょうか。100年後には「人類が火星に移住」していたり、街には「空飛ぶ車」があったり、さらには「テレポーテーション」を使っているかもしれません。「反重力装置を使ったホバーボード」の競技がオリンピックに採用されているかも。日本人的にいうと、「ドラえもんのひみつ道具が全部揃っている」かもしれません。

少なくとも、プリンタのモノクロ印刷にインクは必要なくなったり(インクが一滴もいらないプリンター「インクレス」。特別紙もいらず、モノクロでの印刷は無制限に可能)、量子コンピューターは実用化され、我々が今使用している古典コンピューターはヴィンテージ扱いされていることでしょう(「1量子ビットしか使えない「弱い」量子コンピューターでも、古典コンピューターより「強い」ことを証明しました」 京都大学 / 2018年5月18日)

視点を未来に置くだけで、ありえないようなアイデアが実現しているかも、と思ってしまいます。現代と未来には断絶があります。しかし、あらゆるプロジェクトは過去、或いは現代から未来に繋がっているのです。

「色々作って見たら何かが当たる」はただの宝クジです。成功するサービスを作るには、無数の常識の間に埋もれている「隠れた真実」を見つけて、それが人々に広まるような計画・設計をすることではないでしょうか。 全く新しい未来に結実するZERO to ONEの種は、今、この瞬間にこそ植えられたものなのです。

以上、プログラミングをするパンダ(@Panda_Program)でした。

プログラミングをするパンダ
プログラミングをするパンダ (@Panda_Program)
Software Engineer

プログラミングをするパンダ(@Panda_Program)と申します。自分はProgateでプログラミングを学んだ後、プログラマとして転職することができました。

この記事では、ある程度コードを学んだから自分でサイトを作ってみたい。だけど、やっぱりなんだか難しそうと考えている方のハードルを、横断歩道の白線レベルまでに下げることが目的です(この記事の文字数は5701文字です)。

対象者
・これからコードを学ぼうという方
・ProgateでHTML&CSSなどを学んで、合計レベル100を越えた方
・IT技術を利用して、自分で何かを作ってみたい方

こんな方はゴメンナサイ。この記事には以下のことは書いていません
・サイトのアクセス数の伸ばし方
・デザインにこだわったサイトの制作方法
・自作サイトのマネタイズの方法
・斬新なウェブサービスの作り方

以下目次です。

①HTML&CSSだけでWebサイトは作れる。目から鱗の視点を紹介します!
② サイトのコンテンツを考えるだけでOK。便利ツールでラクをしよう!
③作りたいけどアイデアがない。それなら、二つの単語を組み合わせよう!

①HTML&CSSだけでWebサイトは作れる。目から鱗の視点を紹介します!

プログラミングを始めた方は、こんなことを聞いたことがあると思います。

・プログラミング初心者は、まずHTMLとCSSがオススメ!
・HTML&CSSを学んだらウェブサイトが作れる!
・ただ、これだけではプログラミングがわかったとは言えないよ

実際にProgateで学んでみると、上記のことが理解できると思います。

自分のProgateのレベルが150を越えたころ、自分でもサイトを作ってみようと思いました。

ただ、学習と実践は大きく違いました。

ウェブサイトを作ろうとすると、考えるべきことがたくさんあります。 ヘッダー、ボディ、フッターの内容、またサイトロゴや掲載する画像など、全部ゼロから決めて作るなんてとても大変だ、と二の足を踏んでいました。

それでもまずは、ProgateのHTML&CSS中級編の完成目標サイトを分析しようと思い、コードをダウンロードしてローカル環境でサイトを表示してみました。

あれ?うまく表示されてない。バグかな?

そうか、headタグ内でCSSが読み込まれてないんだ。

ん?

よく見ると…

これ、文字と画像だけだ!

文字と画像だけなら、自分の伝えたいことをちょっと書いて画像を載せたら自分にも一つのサイトが作れる!

これに気付くまでは、「サイトを作ること」=「HTMLのコードを書くこと」 と思っていました。

意外なことに、サイト制作の第一歩は「文字を書くこと」だったんです。 素晴らしいコードを書くことではないんです。これなら、本質的にはブログの記事を書くことと同じです。

そして、この気づきこそが自分がサイトを作って公開する原動力になったのです。

(本来ならこのように表示される)

CSSは「HTMLの見せ方」を決めるものという頭では理解していた言葉が、ここでやっと腑に落ちました。

文字の大きさを変えたり、書体を選んだり、背景画像などを使うのは、「自分が伝えたいことを見やすく、またカッコよく見せるため」 だけです。

1つ目のサイトを作るにあたり、まずはどんな文字をサイトに載せるのかを考えてみましょう!画像はフリー素材を検索すれば自然と集まります!

マインドセット①:サイト制作では、公開するのは文字と画像である!

② サイトのコンテンツを考えるだけでOK。便利ツールでラクをしよう!

次はレイアウトのハードルと、掲載する画像のハードルを下げたいと思います。

レイアウトはマウスで組み立てる!オートコーディングツールを使ってみよう

公開するのは文字と画像だけと言っても、ゼロからHTMLとCSSを書くのは大変です。

レイアウトや画像はどうしようかなと考えていると、noteでこんな記事を見つけました。

LP特化のWebページ作成ツール「Pingendo」がとにかく凄い。(世永玲生)

Pingendoとは、オートコーディングツールのことです!

使い方は上記記事をご覧いただくとして、これのすごいところを3行で説明すると以下の通りです。

  • UIの部品をドラッグ&ドロップするだけでレイアウトが作れる
  • リアルタイムでHTMLコードが書かれていく
  • 個人利用の場合、料金は無料

使ってみると、簡単にオシャレなレイアウトが出来上がっていき、とてもワクワクしました!自分の最初のサイトもこのツールを使って作りました。

実際に見てみましょう。

操作画面です

パーツを選んでドラッグ&ドロップすると…

レイアウト構成とコーディングが完了!

オートコーディングツールはPingendoの他にも、Adobe製のAdobe museなどいくつか種類があるようです。

このように簡単にサイトのレイアウトを作ることができる反面、ゼロから作らないと自分で作ったことにはならないんじゃないか、という人もいると思います。

ただ、この記事の目的は 「まず1つ目のサイトを作っていたい人のハードルを下げる」 ことなので、使える便利ツールはどんどん使うことがベストだと考えています。

また、もともとあるツールやライブラリを探してラクするのが、デキるエンジニアの条件でもあると自分は考えています(さらにデキるエンジニアは、このようなツールやライブラリを作ったり、そのコードの中身を読める人です)。

Pingendoである程度形をレイアウトを作った後で、ちょっと見出しのサイズを変えたい、既存パーツのレイアウトを変更したい、というような時にHTML&CSSの知識が役立ちます!

各パーツはリアルタイムでコードに反映されるので、HTMLを直接書き換えたり、CSS/SCSSファイルに変更を加えることで、 自分好みのレイアウトにアレンジすることができます!

これはHTMLやCSSの知識がある人にしかできません。自分が思うようなアレンジを加えられたら、「初心者だけどHTMLとCSSは使える!」 と判断してOKです。

次にサイトの画像に使えるツールを紹介します。

もう画像で迷わない!無料で使えるcanvaが素晴らしすぎる

せっかくサイトを作るならオシャレな画像を掲載して、スタイリッシュなサイトを作りたいと思いました。

でも自分にはセンスがない、と思う方も多いと思います。自分もインスタ映えするような写真を撮ったり加工することはできません。

そこで、canvaというサービスをご紹介します!実はこの記事のトップ画像もcanvaのものを利用しています。

このサービスのいいところは以下の通りです。

・場面ごとのテンプレートが豊富で無料!
・文章に合うデザインが必ず見つかる
・デザインがとってもオシャレで使い方も簡単!

今回は記事のサムネイル画像が必要だったので、canvaに掲載されている画像をダウンロードしただけです。必要であれば、文字を記入したり、画像にフィルターをかけたりと、様々な加工が簡単にできます!

オシャレな画像があるだけで、なんだかすごいものに見えます。 なんでもいいので1枚画像を作ってみて、自分が作ったんだと周りの人に見せると、とてもいい反応が返って来ると思います。

その反応が、ネットの向こう側の人と同じ反応なんです。ただ、身近な人には種明かししてあげましょう(笑)

自分も一枚個人で作ってみましたが、画像の加工自体は5分もかかりませんでした!

canvaの登録や利用方法は、下記記事が参考になると思います。

全てのエンジニアにおすすめしたい簡単にデザインができるデザインツール「Canva」のススメ

これでサイトのレイアウト構成を作ることと、サイトに掲載する画像を準備するハードルが下がったと思います!

レイアウトや画像は、補助的な役割でしかないんです。 便利ツールを使いこなして補助的な部分はサッと片付け、コンテンツというサイトのキモに時間と労力を注ぎましょう!

マインドセット②:先人が作った便利ツールを大いに活用しよう!

③作りたいけどアイデアがない。なら、二つの単語を組み合わせよう!

最後に、何か作ってみたいけどアイデアがないという方のハードルを下げる方法を紹介します。

それは、自分の趣味や興味に関連するキーワードを二つ組み合わせる方法です!

一つの単語ではテーマがカバーする範囲が大きすぎます。ですが、もう一つの単語を組み合わせることで、カバーする対象がせばまります。あとはそのテーマで自分が欲しいものを作るだけです!

実際に自分が作ったサイトは、以下の単語の組み合わせで生まれました。

「ウィスキー」 × 「蒸留所の見学」

日本のウィスキー蒸留所を巡ろう 〜Japanese Whiskey Distilleries〜

自分はウィスキーが好きで、蒸留所の見学にも行きます。蒸留所の見学は公式サイトから予約できます。

ですが、見学予約ページにまでたどり着くには、トップページから何度もリンクをクリックしなければなず、とても煩雑でした。また、直前になると予約状況は頻繁に変わるため、何度かサイトをチェックしに行く必要がありました。

そこで、ワンクリックで予約ページに飛べるページが欲しい!と考えました。じゃあ、これをテーマにサイトを作ってみよう、と作るサイトのコンテンツを決めました。

サイトの文章は蒸留所の設立の経緯を紹介している、別のサイトの記事からの引用です。自分の趣味の知識も深まり、下調べをしている間もとても有意義でした。

もしこれが「誰かに使って欲しいページ」を作るとします。すると、作っている間に「誰か実際にみてくれるんだろうか。一人もいないんじゃないか」と疑心暗鬼になっていただろうと思います。

この点でも、まず1つ目のサイトを作るときは、自分の欲しいものを作ることがモチベーションの継続に繋がります。

また1つ目のサイトを作る際は、以下のことを意識してください。

「1サイトに1コンテンツ。機能は最小限に」

この記事の目的は、ゼロから何かを作る人、Progateの言葉を借りると 「初心者から創れる人」 が実際にサイトを制作するハードルを下げることです。

初心者なので、サイトは簡単なもので良いんです。仮に人から好意的な反応がなかったとしても、「1ヶ月前の自分ならこんなことできなかった。成長したな!」 という感覚を得られれば、まずはそれで十分です。

シリコンバレーのスタートアップのようなサービスを考える必要はありません。まずは、アイデアを出して、それを自分で形にするところから初めてみましょう!

一つ形にしてみると、今まで見えなかったものが見えてきますよ。

マインドセット③:趣味や興味、身近なことをサイトのテーマにする!

初めてのサイト制作は自分との戦い

最後に、少し自分の話をして締めくくろうと思います。

1つ目のサイトを公開するまでには自分の中でハードルがたくさんありました。

初めは「エンジニアってすごいな。自分もこんなかっこいいサイトやサービスを作りたい!」という熱意からProgateでコードを学びました。

Progateでレベルアップするにつれ、今までできなかったことができていく。わからなかったコードの意味が理解できるようになる。これはとても楽しい時間でした。

Progateでのレベルが150を越えた頃、自分でもサイトを作ろうと思いました。が、レイアウト構成で苦手意識があったので、0から作ることはとてもハードルが高いと思い込んでいました。

そうして行動に移せないでいるうちに、「やっぱりサイト制作は難しいんじゃないか。自分にはできないんじゃないか」と、制作を諦めそうになりました。

そんな自分が、それでもサイトを作ることができたのは、どうにかしたいともがく中でここで紹介した見方を手に入れたからでした。

エンジニアは、自分の制作物こそが名刺そのものだと自分は思っています。そして初心者の壁を越えるためには、「自分で何か作れた!」という成果が必要だと思います。

そのようにして、今までプログラミングがわからなかった方が初心者になり、初心者から何かを作れるようになった結果、一人でも多くの方が一つでも多くのサイトやサービスを作ると、きっと面白い世の中になっていくと思います。

これを読んでくださったみなさんが、今まで溜めていたアイデアや、途中まで手をつけていたプロジェクトを公開させようと思うやる気が出たのであれば本望です。その後は、もう手を動かすだけです。

とりあえず、1つ形にしてみましょう!

以上、プログラミングをするパンダ(@Panda_Program)でした。

プログラミングをするパンダ
プログラミングをするパンダ (@Panda_Program)
Software Engineer