カテゴリー: 未分類

  • 【公表】3月の収益報告

    【公表】3月の収益報告

    皆さん、こんにちは。

    すなです。

    今回は僕の【3月の収益報告】をしたいと思います。

    Webサイト制作やブログを通して僕が今月どれくらい収益をあげたのかを解説したいと思います。

    結論から言うと、大した収益をあげられてはいませんが、Webサイト制作やブログを始めたい方はロードマップ的に見ていただけると幸いです。

    それではさっそく参りましょう。

    Webサイト制作の収益

    まずはWebサイト制作です。

    今月した作業は大きく以下のような感じです。

    • サイト模写(2つ)
    • 営業(5件)

    3月は1件、PASPOLさんのサイトを模写しました。

    非常にコンテンツが多くて、模写に時間がかかった印象です。

    もう1つは、模写とは言い切れないのですが、自分が過去に模写したサイトをWP化しました。

    静的HTMLからWP化する方法をこれで学んだので、サイト制作の幅が一気に広がった感じがします。

    また営業についてですが、これらは全てクラウドソーシングのサイトで行っています。

    今となってはすっかり浸透したクラウドシーシングですが、そのせいかWPのサイト制作などの案件がある程度あります。

    これらに対して、僕は自分が70%くらいできそうだな、と感じた案件に対して営業しました。

    残りの30%は実務の中で勉強してキャッチアップすればokみたいな感覚です。

    お察しかもですけど、営業のうち契約に至った案件は0なので、Webサイト制作での収益は0円でした。

    反省点としては3つあると思っていて、

    • サイト模写と始めたばかりで、模写したサイトのレベルが低い
    • そもそもの営業数が少ない
    • 営業の際に付加価値を提供できていない

    この辺かなと思います。

    これらの改善点として、4月は以下に注力したいと思います。

    • サイト模写のレベルを上げる
    • 月の営業数を合計15件に増やす
    • 相手の依頼にそのまま答えるだけじゃなく、こちらから+αの提案をする

    これらを意識したいと思います。

    まずは初案件を獲得できる様にこれからも作業を続けます。

    ブログの収益

    次はブログについてです。

    ブログについては、3月は9記事を書きました。

    また執筆した内容は以下の様な感じです。

    • 模写など自分のWebサイト制作の過程
    • Web制作で用いるテクニックなどのご紹介

    他にもSNSのやり方とか少し書きました。

    本業をWebサイト制作に置いてる割には、ある程度書けたなという印象です。

    ブログも少しは頑張りたいと思っているので、毎月5本は書ける様に頑張ります。

    また大きく変化したことは、色んな広告サイトに登録して自分のブログに広告を載せたことですね。

    以下の全てのサイトに登録しました。

    Google Adsenseは1回申請して落ちてしまいました。

    少しブログを修正して、現在もリベンジ中です(汗)。

    気になる収益の方ですが、A8.netと楽天アフィリエイトの広告を載せた記事が読まれたらしく、

    • 20円(A8.net)
    • 72円(楽天アフィリエイト)

    合計で92円の収益を産むことができました。

    A8.netでの収益はクリック課金制度だったので、恐らく何人かがクリックしたのかなと思います。

    しかし楽天アフィリエイトでは物販を行ったので実際に商品を買っていただいての収益となります。

    自分が紹介した商品が実際に売れたときは、とても嬉しい気持ちになったのを覚えています。

    3月に初めてアフィリエイトに登録したので、微々たる金額とはいえ収益が発生したのは大変嬉しかったです。

    今月の収益は計92円

    以上が僕の3月の収益報告となります。

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

    ブログでの収益も微々たる金額ですし、Webサイト制作ではまだ案件はありません。

    しかし「継続は力なり」という言葉を胸に、4月も引き続き作業したいと思います。

    では今度は4月の収益報告でお会いしましょう。

    さようなら~♪

  • 【#】Twitterの「イイね」を増やすのに僕が最初にやったこと

    【#】Twitterの「イイね」を増やすのに僕が最初にやったこと

    皆さん、こんにちは。

    すなです。

    今回はまだ成果0の僕がTwitterで「イイね」をたくさん貰うために最初にしたことをお伝えします。

    本記事はまだ実績はないけど、これからSNSを頑張ろうと思っている人向けになります。

    SNSでイイねを増やしたいけどまだ実績がない

    TwitterやInstagramは日常のつぶやきや綺麗な景色など、さまざまな内容を投稿できるSNSです。

    しかしこれらのSNSには普段の日常を投稿する以外に、例えばブログやプログラミングなどで勉強の過程を発信している人がいます。

    現代社会において、SNS上で認知されることは大きな意味があります。

    SNSでのフォロワーが多いことは信頼できる人と見做されるので、多くの人を動かしたり、個人的にお仕事の依頼が来たりと現代ならではの色んなメリットを得ることができます。

    ブログやプログラミングで成果を出されている方は、自分が過去に成果を出した具体的な方法をツイートすることで、初学者などからフォロー・イイねをもらうことができます。

    しかしまだ成果がない初学者はどうでしょうか。

    成功した方法を紹介することができない初学者は、フォロワー・イイねを増やすことは不可能なのでしょうか。

    いいえ、そんなことはありません。

    まだ成果がない初学者にも、フォロワー・イイねを増やす最初にするべき方法があります。

    今回はその方法をご紹介したいと思います。

    #ハッシュタグをつけよう

    具体的にやることは「ハッシュタグをつける」ことになります。

    どういうことなのか、詳しく見ていきます

    実際に数値で比較

    ハッシュタグがないとき

    これは僕が普段、Webサイト制作やブログについての発信をしているアカウントのツイートになります。

    このアカウントで当初、僕はハッシュタグを全く付けずにツイートしていました。

    しめじさんというフリーランスエンジニア界隈では比較的有名な人のツイートに共感したので、引用リツイートしました。

    有名な方のツイートを引用しているにも関わらず、頂いたのはしめじさんからのイイねとリプだけでした。

    本人以外からは全くリアクションを得られませんでした。

    ハッシュタグがあるとき

    しかし僕はあるタイミングから決まったハッシュタグを多用するようになりました。

    こちらは僕が瞬間的な感情を吐いただけのツイートです。

    先ほどのしめじさんの引用リツイートと比べると、学べる内容は全くなく、これぞ本来のTwitterといった様な使い方をしています。

    しかし、こちらはイイねを25個、リプも2つ頂きました。

    統計的に比較

    今度はこのアカウントでハッシュタグを付けたものと付けてないもののイイね・リプ数を比較してみましょう。

    いいね数リプ数
    #あり19.50.5
    #なし1.30
    #の比較

    「#駆け出しエンジニアと繋がりたい」というハッシュタグを付けた直近のツイート10件と、何もハッシュタグを付けずに投稿した直近のツイート10件を抽出し、それぞれのイイね数とリプ数を平均したものを表にまとめました。

    結果はいかがでしょうか。

    ご覧の通り、一目瞭然です。

    ハッシュタグを何も付けずにツイートしていたときの平均が1.3イイねで、ハッシュタグを付けてツイートしてからは19.5イイねです。

    15倍違います。

    見てもらえるようにハッシュタグをつけよう

    僕や皆さんと同様に、SNS上には多くの人が発信しています。

    そして皆さんと同様に、勉強したての初学者は成果がないため、「イイねが増えない、フォロワーが増えない」という同じ悩みを抱えています。

    そこで、特定のハッシュタグをつけることでそのハッシュタグで検索している人に見つけてもらい、イイねを、たまにはフォローをしてもらうことができます。

    もちろん、全然他人から検索されないようなハッシュタグではなく、アクティブなユーザーが多いハッシュタグをつけて、広く色んな人に認知してもらいましょう。

    僕が実際にプログラミング関係のツイートをするときは、

    • #駆け出しエンジニアと繋がりたい
    • #プログラミング初心者

    ブログ関係のツイートをするときは、

    • #ブログ初心者と繋がりたい
    • #ブログ初心者

    をつけてツイートしています。

    まだ実績がない人でも、自分の分野でたくさんの人が使っているハッシュタグをつけて、たくさんイイねをもらいましょう!

  • 【簡単】WordPressサイトにラクしてお問い合わせフォームを設置する手順

    【簡単】WordPressサイトにラクしてお問い合わせフォームを設置する手順

    皆さん、こんにちは。

    すなです。

    本日はWordPress初心者に向けた記事になります。内容はタイトルにある通り、

    「WordPressにお問い合わせフォームを導入する方法」

    をご紹介と思います。

    • ブログ開設したけど、お問い合わせフォーム作れない
    • プログラミングスキルがなくて、簡単に作りたい

    と言う方は是非ご覧ください。

    HTML知らなくても大丈夫

    WordPressはプログラミングスキル、HTMLやCSSを知らなくてもブログサイトが開設できる便利なソフトウェアです。

    プログラミングスキルがあればもっとカスタマイズできるのですが、WordPressはそのスキルがなくても全然困らないくらいお手軽に扱えるのが良いところです。

    しかしWordPressにはデフォルトで「お問い合わせ」の機能がありません。

    そこで今回はHTML&CSSのスキルがなくても簡単にお問い合わせを導入できるプラグインをご紹介いたします。

    Contact Form 7がオススメ

    WordPressには「Contact Form 7」というプラグインがあります。

    これがかなり優秀で、今回はこれをオススメします。

    今回はお問い合わせを固定ページで作成して、それをサイトのヘッダーに置く方法を紹介します。

    プラグインを新規追加する

    まずダッシュボードを開いた状態で、まずは「プラグイン > 新規追加」をクリックします。

    Contact Form 7をインストールする

    検索バーから「Contact Form 7」と入力します。

    自動的に検索がかかって、Contact Form 7が表示されます。

    Contact Form 7の「今すぐインストール」をクリックして、今すぐにインストールします。

    有効化する

    インストールが数秒で完了すると「今すぐインストール」の表示が「有効化」に変わります。

    その「有効化」をクリックして、Contact Form 7を有効化します。

    するとWordPressのメニューに「お問い合わせ」という欄が追加されます。

    お問い合わせを作成

    新しく追加された「お問い合わせ」から「新規追加」を選択します。

    お問い合わせフォームを作る

    今回はContact Form 7のデフォルトのフォームを使って、そのまま説明します。

    自分の分かりやすい名前を設定したら、「保存」をクリックします。

    固定ページを作成する

    「保存」をクリックすると、青い背景のコードが表示されてお問い合わせフォームが作成できたのが確認できます。

    「固定ページ > 新規追加」を選択して、固定ページの作成画面に移動します。

    タイトルを今回は分かりやすく「お問い合わせ」にします。

    段落の右の「+」ボタンをクリックして、選択肢の中から「Contact Form 7」を選びます。

    プルダウンから先ほど設定した名前を選びます(コンタクトフォーム1は最初から入っているフォームです)。

    これで「公開」をクリックすると、以下のようなお問い合わせのページが作成できます。

    お問い合わせページ

    ヘッダーにお問い合わせを設置する

    「外観 > メニュー」から新しくメニューを追加します。

    • 「メニュー名」は自分が分かりやすい名前を設定します。
    • 「メニュー項目を追加」から「お問い合わせ」を選択して「メニューに追加」をクリックします。
    • 「メニュー設定 > メニューの位置」でお問い合わせを表示させたいメニューをクリックします(どの表示でも表示させたいので、全部にチェックしてもokです)。

    上記の設定が完了したら、最後に「メニューを保存」をお忘れなくクリックして設定を保存します。

    すると以下のように、ヘッダー位置に「お問い合わせ」が表示されるようになりました!

    もちろん、「お問い合わせ」をクリックすると先ほど作った固定ページが表示されます。

    お問い合わせフォームを作った方がいい理由

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

    Contact Form 7を使って、プログラミングスキルがなくても簡単にお問い合わせフォームを設置する方法をご紹介しました。

    これで皆さんももうお問い合わせページを作るのに困りませんね。

    ちなみにデフォルトの状態だとお問い合わせからのメールは、サイトを開いているサーバーに送信されるのでレンタルサーバーにアクセスすればメールを確認することができます。

    ところで今回はお問い合わせフォームをCotact Form 7を使って導入する方法をご紹介しましたが、もしかしたら「僕のサイトにはお問い合わせは必要ないよ!」と言う方も中にはいらっしゃるかも知れません。

    しかし僕はWordPressサイトにはお問い合わせフォームを導入することをオススメします。

    それには大きな理由が3つあります。

    • 読者の信頼を得やすい
    • もしかしたら企業からも連絡が来るかも
    • Googleアドセンスに通りやすい!??

    読者からの信頼

    読者がブログを読むとき、それが芸能人ならば顔も素性も分かっているので読者は安心して読むことができます。

    しかし、皆さんのブログはどうでしょう。

    僕も含めて、ほぼ99%の方がいわゆる素人の一般人だと思います。

    そんなブログを読むとき、読者はどこのどんな人が書いているのか不安になっています。

    しかしブログにお問い合わせフォームがあると、読者は

    「この人は連絡が取れる、怪しい人ではないんだな」

    と思ってもらえます。

    お問い合わせフォームがあることで、実際に連絡することがなくても読者は安心して皆さんのブログを読むことができます。

    企業からの連絡も

    信頼できるブログが完成したら、個人の方から色んな連絡が来るかもしれません。

    しかし、そんな信頼できるブログに連絡するのは企業も同じです。

    信頼できる、アクセスの多いブログで企業の商品を紹介してもらえれば、企業は商品の売上アップに繋がると考えるのは妥当ですよね。

    お仕事に繋がるかもしれない連絡が来るかもしれないので、そんな企業様のためにも窓口を用意しましょう。

    Googleアドセンスに通りやすい!??

    本当か分かりませんが、巷ではこう言われているらしいです。

    Googleアドセンスは審査基準を公表していません。

    なので、この情報に信憑性がどこまであるのかは正直分からないのです。

    しかしブロガーのヒトデさんが「数百人からアドセンス審査の相談を受けてきて、通る人の共通点が見えてきました」と仰っていた中にこれがありました。

    確かに、上記の「読者の信頼を得る」と繋がるところもあるのですが、

    連絡できる窓口がある = 信頼できるブログ

    であるのは想像できます。

    Googleも無闇に広告は出したくないので、信頼できるブログの基準に「お問い合わせがあるか」が入っていても納得できると僕は感じました。

    これらの観点からも、まだお問い合わせフォームを設置していない方は是非Contact Form 7でお問い合わせを用意しましょう!

    それではまた会いましょう。

  • 【傘を買え】雨が降った時は歩く?走る?どっちが濡れない??

    【傘を買え】雨が降った時は歩く?走る?どっちが濡れない??

    皆さん、こんにちは。

    すなです。

    本日はいつもとは一風変わった内容です。

    「雨が降っている時は歩くのと走るのでは、どちらがより濡れないか」というテーマを検証したいと思います。

    歩くのと走るの、どっちが濡れないん??

    僕が住んでいる地域では昨日の夜から雨が降り出しました。
    天気予報だと、明後日までずっと雨が続くらしいです。

    今日も雨だったので、傘を差してアルバイトに行きました。

    アルバイトが終わって帰るときに「濡れたくないから、走って帰るか」と思ったのですが、

    「実際、雨って歩くのと走るのどっちの方が濡れないん?」

    と疑問に感じたため、今回はこれを検証してみました。

    実験のルール

    皆んなに理解してもらえるように、まずは分かりやすく説明します。

    全ての条件を当てはめるのは不可能に近いので、今回は次のように条件を絞りました。

    • 雨が降る量が変化しない
    • 風が吹いていない
    • 地面からの跳ね返りや水溜りに足を突っ込むなどその他の原因を考えない

    これらを条件にした上で、人間を直方体と見立てて雨の中を移動したときに濡れる量を考えました。

    2つの濡れ方

    雨の中を移動する直方体を次に2つに分けます。

    • 正面から濡れる量
    • 上から濡れる量

    正面から濡れる

    まずは直方体が正面から濡れることを考えてみましょう。

    直方体は正面に移動すると目の前の雨粒に触れて濡れます。

    このとき直方体はどれだけ速いor遅いスピードで移動しても、移動した先に同じ雨粒が存在します。

    結果正面から濡れる量に移動する「スピード」は関係なく、移動する「距離」が関係します。

    ボルトが走ってもデブが歩いても、同じ100mを移動すれば、到着する時間が違うだけで、正面は100m分の雨に濡れます。
    (言葉悪くてすみません笑)

    【正面から濡れる量は「移動する距離」が関係する】

    上から濡れる

    今度は同様に直方体の上面が濡れることを考えます。

    直方体は正面に移動すると、真上の雨粒を回避できます。
    しかし移動先には別の雨粒が待っているので、結果としては濡れてしまいます。

    この様に、どんだけ速いor遅いスピードで移動しても、上からの雨に濡れる量は止まっているときと一緒です。
    (コップを頭の上に乗せて歩くのを想像すると、分かりやすいかもしれません。)

    つまり、上から濡れるときに大事なのは「雨の中に何分いるか」が大事になります。

    1時間かけて家まで走って帰ったら、上面は1時間分の雨に濡れます。

    5分かけて家まで歩いて帰っても、上面は5分ぶんの雨にしか濡れません。

    【上からの雨は「移動する時間」が関係する】

    今の2つの結論をまとめると、

    • 正面からの雨には距離が関係する
    • 上からの雨には時間が関係する

    です。現在地から家までの「移動距離」は決まっているので、歩いても走っても正面から濡れる量は変わりません。

    しかし、現在地から家までの「移動時間」は走る速さで変わります。
    走れば、その分短くなるし、歩けばその分長くなります。

    結論:走った方がいい。

    正面から濡れる量は走っても変化しないけど、上から濡れる量は走ると少なくなるから、「走ろう!」が正解。

    です。

    定量的な解説

    めちゃくちゃ最低限の定量的な解説をします。理系の方はご覧ください(笑)。

    上の導出で、

    • 正面が濡れる量は距離に依存し
    • 上面が濡れる量は時間に依存する

    と分かった。

    直方体の上面が単位時間あたりに濡れる量をn、正面が単位長さあたりに濡れる量をnとする。
    移動にかかる時間をt、移動する距離をLとする。

    直方体が雨に濡れる総量をNとすると、次の式が成立する。

    N = nt + nL

    このときLは定数であるため、濡れる総量Nをより小さくするためには、tを小さくすればよい。

    本当はもう少ししっかりめの導出も見つけたのですが、数式をブログに書き起こすのが億劫だったのでこれくらいで許してください(汗)。

    走った方がいいなんて

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

    個人的には、走っても歩いても「変わらない派」だったので、歩く速さで濡れる量が変わるのにはビックリです。

    皆さんもぜひ、傘がないときは走りましょう。

    それかタクシーで一緒に帰りましょう。

    それではまたお会いしましょう。
    最後までお読みいただき、ありがとうございました。

  • English Expressions #2

    English Expressions #2

    Hi, there! Welcome back to my English blog.

    It’s been a while since I posted my last article. I’ve learnt some new English words, so I’ll write it just so I won’t forget!

    Let’s go!!!

    Immortality

    the ability to live forever, eternal life.

    Back then, many kings wanted immortality life.

    devote A to B

    to give all of something, especially your time, effort, or love, or yourself, to something you believe in or to a person.

    He devoted his life to the company.
    The report recommends that more resources be devoted to teaching four-year-olds.

    champion

    to support or defend a person, cause, or a principle.

    He passionately championed the poor.
    It was a cause championed by the tech billionaire.

    dedicate

    to give all your attention and effort to one particular thing.

    The actress now dedicates herself to children’s charity work.

    longevity

    the amount of time that someone or something lives, long life or the long time that something lasts.

    The worms have a longevity of about two years.
    The ancient Chinese claimed that garlic promoted longevity.

    entrepreneur

    someone who starts their own business, especially when this involves seeing a new opportunity.

    He was one of the entrepreneurs of the 80s who made their money in property.

    proposition

    a statement that consists of a carefully considered opinion or judgement

    Most people accept the proposition that we have a duty to protect endangered animals.

  • 【ブログ入門】WordPressサイトを開設する方法

    【ブログ入門】WordPressサイトを開設する方法

    こんにちは、すなです。

    今回は僕たちWebエンジニアも御用達も「WordPress」を使って完全に自分だけのサイトを作る方法をご紹介いたします。

    • Webサイト制作を始めたい
    • はてなブログ等ではなく自分だけの完全オリジナルサイトを持ちたい

    という方は是非見ていってください。

    それでは本編です。

    サーバーを借りる

    まずはあなたのサーバーを借りないといけません。

    サーバーには色んな役割がありますがざっくり説明すると、皆さんが書いたプログラミングのファイルを保存する場所です。

    サーバー(server)の語源のserveですが、こんな意味があります。

    〜に仕える、奉公する、尽くす

    (飲食物を)出す

    (テニス・バレーボールなど)サーブする

    weblioより

    「相手のために出す、仕事する」みたいな意味があります。

    つまりITにおいては「ファイルを供給する」という役割があります。

    ここで言うファイルとは簡単に言うとホームページのことです。これらを保管している場所から皆さんのパソコンに提供するので「サーバー」と呼ばれています。

    サイトやブログ開設の第一歩は、まず自分のサーバーを持つことから始まります。

    このブログのサーバーは「ロリポップ!」という会社からレンタルしていますので、今回は「ロリポップ!」でサーバーを借りるという体で話を進めていきます。
    ロリポップ!

    各種レンタルサーバー屋さんには色んなプランがありますが、ブログサイトを開設するだけなら1番普通のプランで問題ないと思います。

    僕が入っているロリポップ!のスタンダードプランは、初期費用1650円と月額550円なので全然負担はないです。

    「WordPress簡単インストール」でWordPressを準備する

    ロリポップ!(や他のレンタルサーバー屋さん)でサーバーを借りてログインしたら、「WordPress簡単インストール」的な項目がどこかにあると思います。

    レンタルサーバー3大手のWordPress導入方法を紹介しましたが、だいたいの場合はWordPressの案内がどこかにあると思います。

    各種サイトがWordPressインストールの手順を用意しているので、その案内に沿って作業すれば問題なく借りたサーバーにWordPressを準備できると思います。

    WordPress開設!!!

    WordPressの導入が完了したら、晴れてあなたのブログの開設完了です!!!おめでとうございます!

    記事の執筆をすれば、サイトがあなた好みのブログに変化していきます。

    【中級編】テーマを変えてみよう!

    ですが、これだとWordPressのデザイン・見た目がデフォルトのままです。少しダサいや、テンプレのデザインは嫌だ、というこだわりの強い方もいらっしゃるかもしれません。

    そんなはWordPressの「テーマ」を変えて見ましょう。

    WordPressにはLINEでいう「着せかえ」に似た機能があり、見た目やデザインを「テーマ」を変えることで変更できます。

    有料・無料など様々なテーマがネット上にあるので、お気に入りのデザインのテーマを見つけたら自分のWordPressにアップロードして適用してみてください。

    正常に処理が完了すると、あなたのWordPressがさっきとはまるで違う見た目をしているのが分かると思います。

    僕がオススメする無料のWordPressテーマを5つピックアップしましたので、調べる前に一旦こちらを見てみてください。

    • Cocoon – シンプルで万能的な無料テーマ。デフォルトがホワイトを基調としたデザイン。
    • Luxeritas – サイトが非常に軽く設計されている無料テーマ。「ザ・ブログ」というデザイン。
    • Lightning – 多くのカスタムが用意されている無料テーマ。会社サイトなどにも向いている。
    • AFFINGER – 『「稼ぐ」に特化』した有料テーマ。1つのテーマで多くのデザインが可能。
    • SANGO – エンジニア系の発信で有名な「サルワカ」が提供している有料テーマ。

    皆さんもお気に入りのテーマを見つけて、自分なりのサイトにしましょう。

    【応用編】独自ドメインを取得してみよう!

    今度はサイトのurlに注目しましょう。現在では借りたレンタルサーバーのurlがそのまま使われていると思います。

    せっかくならurlのブログと関連性のある名前にしてみましょう。

    レンタルサーバーから提供されるurlではなく、自分で用意するオリジナルなurlを「独自ドメイン」と呼びます。

    独自ドメインは、レンタルサーバー同様に、色んな会社さんが貸し出し・販売をしているので各種サイトを訪問して自分が欲しいドメインがまだ有効かどうかを見てみてください。

    僕はロリポップ!が推奨する「MuuMuu Domain」でこのブログの「sunablog.tokyo」という独自ドメインを88円/年で契約しています。
    ムームードメイン

    ドメインは以下の様に「~.〇〇」のドット以降によって料金が大きく違います。

    • 「~.jp」は、2035円
    • 「~.com」は、1045円
    • 「~.tokyo」は、88円
    • 「~.ai」は、13090円

    これらは全てMuuMuu Domainでの結果ですが、他のドメインの会社を見ると結構料金が違ったので、独自ドメインに契約される方は色々見てから決めてみてください。

    独自ドメインを購入されたら、ロリポップ!(や他のレンタルサーバー屋さん)にログインして、「独自ドメイン設定」で借りているサーバーと独自ドメインを紐づけてください。

    この作業は設定後、処理が完了するまで数分かかりますが、少し待つと先ほど借りた独自ドメインであなたのブログを閲覧できる様になります。

    これが完了すれば、あとはもう少しです。

    【応用編】サイト自体をSSL化してみよう!

    最後にブログサイトをSSL化しましょう!

    これは簡単に言うと、サイトの通信を暗号化して安全性を高めるということです。

    サイトのSSL化はこちらの記事でざっくりと説明しているので、興味を持たれた方はこちらも合わせてご覧ください。

    https://sunablog.tokyo/2021/03/10/post-900/

    (多くのレンタルサーバー屋さんも同じだと思いますが)ロリポップ!では借りたドメインのSSL化を無料で行えます。

    ロリポップ!にログインしたら、「セキュリティ > 独自SSL証明書導入」という項目を選択してください。

    ここで、先ほど紐づけた独自ドメインを選択して、SSL保護を有効にすれば晴れてあなたのブログはSSL化されたということになります。

    これであなたもサイトを開設できる様になります

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

    知っていると大した作業じゃないんですけど、いざ分かりやすく文章にしたら記事のボリュームが多くなってしまいました。

    作業の深い手順は省いて説明しているので、躓いたら焦らずに1つ1つ調べて解決していただけたらなと思います。

    最後の最後まで読んでくださった方はありがとうございました。

    また次のブログでお会いしましょう。

  • 4つ目の模写サイトが完成しましたっ!

    4つ目の模写サイトが完成しましたっ!

    皆さん、こんにちは。

    すなです。

    今回はシリーズ「大学卒業までに20万/月を稼ぐ人の話」の第四弾になります。

    今回もサイトを模写するにあたって、ポイントや技術的なお話をできたらなと思います。

    前回に記事をまだ見てない方は、こちらをご覧ください。

    https://sunablog.tokyo/2021/02/27/post-706/

    世界一周団体「TABIPPO」のモノづくりブランド

    今回、模写させていただいたWebサイトは、世界一周団体TABIPPOのモノづくりブランド、PAS-POLのサイトになります。

    PAS-SOLさんのWebサイトは旅の魅力を伝えつつ、モノづくりブランドとして自社で開発している商品の宣伝や、PAS-POLの企画を案内するニュースのページなどがあります。

    Webサイトは非常に綺麗で、デザインはまとまっていて、かなり見やすいのではないかなと思います。

    完成した模写サイト

    今回、模写した僕のサイトはこちらになります。

    元サイトを完全には模写していなくて、

    • トップページ
    • NEWSページ

    のみ模写しました。

    下層ページは似た様なレイアウトの横回しなので、スタミナを付けたいときは有効かもですが、ページの構成を勉強したい人にとっては多少時間の無駄かなと思いました。

    作業量が多かった

    今回のサイト模写で用いたスキルなどについて解説したいと思います。

    HTML&CSSとJavaScript

    今回のサイトで扱ったスキルは以下になります。

    • たくさんのHTML
    • たくさんのCSS
    • 少しのJavaScript(= jQuery)

    今回のサイトが今までのサイトと1番違う点は、1ページあたりのテキスト量がとても多いことです。

    過去のサイトはそこまでHTMLの量が多くなかったのですが、今回はかなり作り込まれたサイトだったのでまずそもそもの量が多かったです。

    レスポンシブ対応

    それに加えて、レスポンシブでレイアウトではなくデザイン自体が若干変わるので、それに対応するのが少し大変でした。

    画面幅が900px以下に時はheaderのメニューがアコーディオンメニューになるので、メニューを2回作る様な作業をしました。

    また下部に外部リンクも画面幅に応じて要素数が変わるので、これも対応するのが少し大変でした。

    レスポンシブ系で毎回重宝しているのは、やはり「display: flex;」ですね。

    こいつはかなり優秀です。

    数年前のBootstrapと同じ様な雰囲気を感じますが、最近はdisplay: flex;の様が覇権を握っている様な気がします。

    同じ内容が実装できれば中身はどちらでもいいと思いますが、もしまだ使ったことな人いたら是非display: flex;も使ってみてください。

    またheader付近にスライドがありますが、これはjQueryは使っておらずcssのみで実装しています。

    複数の画像を用意して、それらにtransition: all 1s ease-in-out;を適用しています。

    詳細を知りたい方は僕が参考にしたサイトを貼っておくので、そちらを参照ください。

    作業時間は50時間

    今回も体感なのですが、この模写サイトを制作するのに50時間くらいかかったかなと思います。

    ニュースの記事部分を全て一旦書き起こしているため、同じ作業が重複しているのも時間がかかった原因かと思います。

    時間の80%はWebサイト自体を制作するのに費やしました。

    残りの20%はそれをWordPress化するのに使いました。

    WordPressめっちゃ便利です

    今までずっと食わず嫌いして避けていたのですが、ちゃんと取り組んだらこんなに使いやすいのかとびっくりしています。

    これは余談なのですが、過去に俺のことをなんとなく嫌っていた人がいたのですが、ちゃんと僕と絡む様になったら今では大親友になったみたいな話が昔ありました。

    その時と似た感覚を覚えました(なんの話?)。

    WordPressはWeb制作をする上では避けては通れない道です。

    Web制作をする際にRuby on RailsやLaravelなどのフレームワークを勉強してちゃんとプログラミングを学習される方は、なんとなく「WordPressって逃げじゃん?」みたいな思い込みでWordPressを避けることがあると思います(僕はそうでした汗)。

    しかしCMS(= Content Management System)なだけあって、使いこなせる様になるとWP側で記事やレイアウトの管理(= Management)をしれくれるので、圧倒的に楽だと思いました。

    要は一度HTML&CSSなどのレイアウト、デザインを決めてしまえば、全ての投稿に同様のデザインが適用されるので、かなり便利です。

    10-15万円で受注できればおけ

    Webサイト制作会社の相場はもっと高いですが、個人でやっているのと、まだ駆け出しなので10-15万くらいで受注できれば全然アリなのではないかなと思っています。

    今回の模写では2ページ分しか模写していないので、実際はもう少し金額を上乗せできる様な気もします。

    先にも書きましたが、最近はWordPressの扱い方が少しずつ分かってきてプログラミングが楽しいと感じれらる様になりました。

    苦痛なく、しかもお金も頂戴できるのならば、これほど幸せなことはありません。

    ありがたいことに学生の長期休暇は勉強にうってつけなので、まだまだ吸収したいと思います!

  • 「Parental Advisory」って何よ?

    「Parental Advisory」って何よ?

    みなさん、こんにちは。

    すなです。

    今回は「えっ、それってそんな意味があったの!??」って話があったので、記事を書きました。

    今日の記事は「トリビア」記事になります。

    どうぞ、暇つぶしにご覧ください。

    ジャケット写真

    突然なのですが、僕はHopHopの文化が好きでHipHopダンスやHipHopミュージックを嗜好します。

    ラップに代表されるHipHopミュージックで言うと、ここ数日は特に

    • BAD HOP
    • LEX
    • Joey Bada$$

    などのアーティストにハマっています(メジャーですんません笑)。

    そんなHipHopアーティストが販売するCDのジャケット写真は、音楽自体と一緒でそのアーティストの個性がたくさん表れていると感じます。

    Jjoey Bada$$のアルバム
    B4.Da.$$ – Joey Bada$$

    これはJoey Bada$$の「B4.Da.$$」というアルバムのジャケット写真です。

    写真自体はモノクロで、タイトルの「B4DA$$」という文字にだけ色がついてついています。

    ASTROWORLD
    ASTROWORLD – Travis Scott

    これはTravis Scottの「ASTROWORLD」というアルバムのジャケット写真です。

    真ん中にはSICKO MODEの入りでも登場する、Travis Scottの顔の形をした建物のような物が描かれています。またこのSICKO MODEのMVのかなり個性的で様々なエフェクトがかけられていて、見ているだけで独特の世界観に引き込まれます。

    右下のロゴ、知ってる?

    この様にHipHopアーティストのジャケ写には様々な表現が込められていますが、それぞれの右下に共通したロゴがあるのに気付きましたか?

    Parental Advisory

    これです。

    よく目にするロゴだったのでロゴの存在自体はずっと前から知っていたのですが、それがなんなのかは何も知りませんでした。

    実はこれ意味があるらしいです。

    PARENTAL ADVISORY

    「PARENTAL ADVISORY EXPLICIT CONTENT」と書かれています。

    ぼんやりとした印象だとHipHopのアルバムでよく見る印象だったので、てっきりHipHop関連の団体に所属しているアーティストに付与されるロゴかなって思っていました。

    まさかの18禁!??

    半分本当で、半分嘘です。

    実はこのロゴは、未成年に相応しくないコンテンツが含まれる可能性のある音楽に対して、それを保護者に勧告するバッジだそうです。

    • PARENTAL – 親の、parent的な
    • ADVISORY – 助言を与える、アドバイス
    • EXPLICIT – 露骨な
    • CONTENT – コンテンツ

    和訳はざっとこんな感じです。

    この「露骨なコンテンツ」に含まれる要素には以下の様なものがあるらしいです。

    • 暴力
    • 性的なコンテンツ
    • 薬物乱用

    などの強い言葉や描写が含まれると、あのロゴが付与されてしまいます。

    HipHop文化

    残念なことに、PARENTAL ADVISORYのロゴが付いているHipHopアーティストのアルバムは多い気がします。

    これを「文化」と一括りにしてしまうとヒップホッパー全体が悪く見られるので個人的にはあまりしたくないですが、結果的にはそうなっています。

    HipHopダンスをするヒップホッパーの端くれとしてはエンタメの1つと捉えて、いいバランスでこれらと付き合っていきたいですね。

  • 3つ目の模写サイトができました!

    3つ目の模写サイトができました!

    どうも、すなです。

    前回に引き続き、また新しい模写のポートフォリオができました。

    今回も制作するに当たってのポイントを話したいと思います。

    架空の病院のサイト

    今回もシリーズ「大学卒業までに20万/月を稼ぐ人の話」になります。

    まだ見ていない方は、前回の記事はこちらになります。

    https://sunablog.tokyo/2021/02/23/post-670/

    完成した模写サイト

    3つ目に制作した模写サイトは架空の町の医院のサイトになります。

    早速ですが、完成品がこちらになります。

    はにわまんさんの元サイト

    今回、僕ははにわまんさんのこちらのサンプルサイトを参考にしました。

    技術的にはそこまで高くない

    今回の模写で用いたスキルや詰まったポイントなどを話したいと思います。

    HTML&CSSのみ

    3回目の模写で使ったスキルは以下になります。

    • HTML
    • CSS

    これだけでした。

    JavaScriptやPHPなどの動作確認をしなくてよいので、元のサイトをひたすらに書き書きする作業がメインでした。

    全ページは5枚

    ページ数は5枚と今回は多めになりました。

    ページ間の構造は以下になります。

    • トップ
      • 病院の紹介
      • 施術の案内
      • スタッフの紹介
      • アクセス

    作業時間は12時間

    今回は枚数自体が多かったので、単純計算その枚数分作業時間が増えてしまいました。

    しかし作業自体はあまり難航することなく、今回はスラスラと書くことができました。

    昔の感覚がだいぶ戻ってきています。

    作業量を減らすためにした工夫

    今回は5枚分ページを書いたのですが、真っ当に全部書いているともっと時間がかかると思ったので、今回は書くのに少し工夫をしました。

    サイトを見ていただいた方は分かると思うのですが、5枚それぞれのページでは共通している箇所(ヘッダーやフッター、メニューなど)があります。

    それを今回は逆手(?)に取り、1箇所で作って他の箇所にも転用することで時間と作業量を削減しました。

    cssファイルを2つ読み込む

    基本的に1つのHTMLファイルに対しては1つのcssファイルを読み込むのが普通なのですが、今回は

    • 共通用のcssファイル
    • 個別用のcssファイル

    を用意して、先に「共通用のcssファイル」を読み込んで、後から「個別用のcssファイル」を読み込むことにしました。

    今回のサイト模写ではこれが特に有効で、共通用cssファイルを用意したことで個別用ファイルの分量をかなり少なくできました。

    レスポンシブにも対応

    今回も同様に、全てのページでレスポンシブ対応をさせました。

    Font Awesomeとパンくずリスト

    今回のサイトでは今までで目立って扱ってこなかったこれら2つの要素を扱いました。

    模写についての記事なので、触りだけ紹介します。

    Font Awesome

    Font AwesomeはWebでできる、大量のアイコンを扱っているサイトです。

    文字や記号などのアイコンはもちろん、ツイッターやフェイスブックなどのロゴも扱っています。

    linkタグにFont Awesomeへのリンクを貼り、iタグとしてアイコンを簡単に導入できるので非常に使いやすく、オススメです。

    今回はヘッダーロゴの病院のアイコンと、同じくヘッダーにある電話マークのアイコンにこのFont Awesomeのアイコンを使用しました。

    パンくずリスト

    パンくずリストとは、Webサイトに訪れたユーザーが今どこにいるのかを表したナビゲーションの一種です。

    『ホーム>通販>事務用品>ハサミ』の様に階層的に現在地を案内します。

    今回はページ数が多くなかったので、トップ以外のページで手作業でパンくずリストを作成しました。

    7,8万が妥当(?)

    ページ数こそ多いものの、今回の模写サイトはHTML&CSSのみの作業だけのサイトなので、案件を受注するとしてもそこまで単価は上げられないかなと思いました。

    作業時間の割りには安いかもですが、でもそこら辺の普通のアルバイトと比較したら断然マシなので、めげずにWebサイト制作を頑張りたいと思います!

  • 2つ目の模写サイトができたので紹介します!

    2つ目の模写サイトができたので紹介します!

    皆さん、こんにちは。

    すなです。

    今回も「大学卒業までに20万円/月を稼ぐ人の話」のシリーズ第二弾になります。

    前回に記事をまだ見ていない方は、こちらをご覧ください。

    https://sunablog.tokyo/2021/02/22/post-553/

    2つ目のサイト模写が完成!

    さて、今回も前回に引き続きサイト模写してポートフォリオを充実させようという話をしたいと思います。

    前回制作した模写サイトは、HTMLとCSSのみを用いた簡単なものでした。

    今回は第二弾ということで、技術的に少しだけレベルアップしたサイトを作成しました。

    写真家のポートフォリオサイト

    今回は写真家のポートフォリオサイトを想定したサイトを模写しました。

    参考にしたサイトはこちらです。

    これも前回と同様に、模写用に練習サイトを集めているこちらのサイトから見つけました。

    実際に制作したサイトがこちら

    このサイトを参考に僕が模写したサイトがこちらです。

    こちらも前回と同様に、本家のサイトと同程度のクオリティを保てたかなと思っています。

    所要時間約3時間

    今回も体感時間にはなるのですが、所要時間は3時間程度で済んだかなと思います。

    時間が大幅に短縮できた要因は、前回の第一弾からすぐに2つ目を制作したので感覚がだいぶ戻ったのと、スキル的には大きくはレベルアップしてないので、それもあると思います。

    またレスポンシブ対応も慣れてきて、前回よりも早く作業することができました。

    今回も1ページだけ

    今回のページ数も1枚のみになりました。

    HTML,CSSに少しのjQuery

    このサイトで用いているスキルは以下の様になります。

    • HTML
    • CSS
    • jQuery (=JavaScript)

    今回のサイトは90%が前回と同様にHTMLとCSSのみで制作できるスキル感になります。

    また今回は前回使わなかったJavaScriptを用いました。

    ページ上部のメニューボタンを押すと、ページ下部の該当要素に遷移するのですが、その時にJSのanimate関数を用いたスムーススクロールを使用しました。

    これでサイトが少し動的になりました(厳密には動的ではありませんが)。

    PHPも使いたかった

    ページの1番下に連絡を送る用のフォームがあって、こちらは本来PHPを使わないと機能しません。

    僕個人は過去にPHPを扱っていたので、この機能自体は作成できるのですが、

    • ((居ないとは思いますが)悪意あるユーザーによって不必要に)メールが送信されてしまう
    • 使用するスキルを限定したかった

    ので、今回はHTMLでフォームだけを作成して、機能面のバックエンドは何もしませんでした。

    5万~円程度で受注できたら嬉しい

    気持ち程度ですがjQueryを使用しましたし、本来はPHPでメールを送信できる機能も付けれるので、この程度のレベル感なら5万円程度で受注したいところですかね。

    作業時間を短くできた

    今回の大きな収穫は、作業時間を大幅に短縮できたことです。

    これを作るにはなにをどうすればいい、って言うのがすぐにイメージできる様になったのが良かったです。

    また使う言語も少しづつ増えてきているので、もっと色んなことをできるようになりたいですね!