Webサイトをデザインする【良いデザインを生み出すには?】

今回はいよいよ!サイトのデザインについて考えていきたいと思います。

【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみたでも書きかましたが、デザインのはじめは真似ることだと思ってます。

ゼロから生み出すのはとてもとても難しいものです。
でもいろんなサイトを見て、デザインを見て、それを自分なりに解釈して、もっとこうしたい、ああしたい…そうしていくと今までにない素敵なデザインが完成したりします!

大体サイトを2、3個に絞って見ていくと参考になります。

その参考サイトを選ぶポイントとしては
1️⃣カラーで選ぶ
2️⃣テイスト(かわいいとかかっこいいとか)で選ぶ
3️⃣作るサイトの業種やテーマで選ぶ
これの組み合わせかと思います。

今回はその際に大変便利なまとめサイト様をご紹介します!

Web系

🌟Webデザインの見本帳

Webデザイナーならみんな知ってるまとめサイト。
印象、色、ジャンルから探せるので、自分の求める参考サイトがきっと見つかります!
個人的に、厳選していいサイトを掲載しているイメージです。

🌟イケサイ

Webデザイナーなら以下略
業種カテゴリと色から探せます。
個人的に、更新頻度が高く新しい情報を確認できるイメージです。

🌟Web Design Clip

Webデザイナーなら以下略
上部メニューのメインカラー、サブカラー、レイアウト、カテゴリー、タグから探せます(知らなかった)。
採用サイトにも特化しているようです。

🌟bookma! v3

ググったら見つけました!
左メニューのリージョン(国内・国外)、カラー、バックグラウンドカラー、テイスト、カテゴリーから探せます。
バックグラウンドカラーからも探せるのはいいですね!

LP系

せっかくなので本業でお世話になってるLP(ランディングページ)版もご紹介します!

🌟LP アーカイブ

カラー、カテゴリ、イメージから探せます。
LPに関する記事もかなり勉強になるのでオヌヌメ。

🌟Web Design Clip [L]

Web Design ClipのLP版。
上部メニューのメインカラー、サブカラー、カテゴリー、タグから探せます(知らなかった)。

参考サイトを選んだら

好きな参考サイトを選んだらいよいよデザインしていきましょう。
がんばれ!!(丸投げ)

いやもうね、こればっかりはね…

ひとつ、私がよくやるのは、参考サイトを足して割ることです。
3つ選んだなら、それを全部足して3で割ったものを作ると、素早くいいものが作れます。
これぞなんちゃってWebデザイナー!(ドヤ顔でいうことじゃない)

試しに一つ作ってみた

例えばなんか青っぽくてかっこいい作品紹介サイトを作りたい!とします。

参考サイトを選びましょう!
今回は青で作りたいので青系のサイトを選んでみます!

なんかめっちゃかっこいい!

ビックリビッグローブモバイル

格安SIMが驚きの月額換算700円(税別)から | ビックリビッグローブモバイル
https://join.biglobe.ne.jp/mobile/special/

Bのアクセントも効いてます!

下層ページもめっちゃいい!

ナブコ自動ドア

ナブコ自動ドア
https://nabco.nabtesco.com/

青枠が良い感じです!
やっぱり白背景は画像が映えますね!

レイアウトめっちゃいい!

バルコムグループ 新卒採用

バルコムグループ 新卒採用
http://www.balcom.jp/recruit/fresh/

グリッドレイアウトは見ていて安心感があります!

——————————

ということで、なんか青くて白くてグリッドなかっこいい作品紹介サイトを作りましょう!!
このように、参考サイトを見ることでより具体的な完成イメージを得ることができます。

じゃん!

ててとポートフォリオをあわせてteteフォリオ(笑)

内容がないからあまり参考にならないけど、斜めの図形でグリッドで単調な中にも動きとスタイリッシュさをだしました。
青枠は全体がまとまってみえて、かつ、かわいいのでいいのですが、参考にあまり寄せすぎるとただの真似っこどんどんになるので、実際は入れないほうがいいかもですね~
でもこういう表現手法もあるのだと知っておくことはとても大切です!
いつか必ず役立ちます!!

よりよいイメージをもってよりよい形を作っていこう

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

どんなサイトにしようか考えてる時が一番わくわくしますね!
今回の裏話としては例にするデザインが全然かっこよくできなくて地味に時間かかりました笑
デザインってむずかしいな~🙄

デザインは、はじめは真似ることからでも、だんだんと自分なりのイメージをもって、それをより具体的なものにしていって、あとは形を近づけていく作業だと思います。
言葉で書くのは簡単ですが、私は4年デザイン学部に通ってギリギリできるようになったかなって感じです。

良いデザインを作るには費やす時間も制作の時間もかかるけど、どれも大切なものだと思います。
あと沢山良いデザインを目にして吸収していくこと!
最高のものを生み出せるよう、あきらめずに続けていきたいですね。

※今回の方法はあくまでも個人の主観による一例です。

🎀WebデザイナーによるWebサイトの作り方はこちら!

モノづくりについて熱く語る回

すっかりお久しぶりになってしまいましたよ(2回目)
俺ティーの感想書いてるけど全然進まんちん😇

最近は副業みたいな感じでちょっとした活動に巻き込まれ参加してるんですが、それがなかなか熱いです。
Web担当みたいな。たのし~い!

でも友達とかみんなに「ちゃんとお金もらわなよ!」って言われるw
わかってる…無料や格安で受けちゃうからデザイナーの仕事の地位がいつまでたっても上がらないんや…😔💦

でも他のメンバーも本業やいろんな悩みを抱えてるのを見ると、私もなにかしたくなっちゃうお人好してて…(ここで好感度UP)

デザインの勉強って「なぜそうしたのか」をすごく重視するから、デザイナーも自分の作ったものに対しての「なぜ?」は大切にしてる人が多いと思うんだけど、一般の人からしたらそれって「別になんとなくでもいいじゃん」みたいな感じだったりするから、どっちがいいのかわからなくなったり🙄

でも「なぜ」を説明できないものは説得力に欠けるし、説得できないなら人の心なんてやっぱり動かないと思うわけですよ。

仮にもこれで飯食ってるプロのデザイナー(Webだけど)として、モノづくりをする以上そこは大切にしたいなと思うし、メンバーのみんなにもなんか上手く伝えたいなと思います。
別にそんな余計な事しなくても好きに作ればいいんだけど、それって私からしたら全然本気じゃないのね。
本気じゃないのって他のクリエイターになんか申し訳ないというか…恥ずかしいというか…

本当に自己満だけど、でも理由を考えることがもし本当にいいクリエイティブに繋がるなら、それを実証して一般の人に理解してもらえるようになれば、「デザイナーってこんな大変な思いしてモノを生み出してるんだな」って、それって果てはデザイナーの地位向上に繋がるんじゃないかなって、おお…!!繋がった!!!笑

今日もいいクリエイティブできるといいね☀️

レスポンシブWebデザインについて考えよう【デメリットを補うには?】

レスポンシブサイト多いですね。
レスポンシブは消去法で最適だけど、最強・万能ではないと思っています😔

レスポンシブの欠点を「でもどうにかして!!」と言われないようにどういった対処ができるか、レスポンシブについてもう一度よく考えてみようと思います🙋

外でパソコンを広げ、青空コーディングをする女の子




レスポンシブWebデザインとは?

デバイスに関係なく、同じURLで同じHTMLコードを使用し、画面幅によってコンテンツサイズが変わるデザインのこと。

少し前までスマートフォンは大体みんな320pxだったので、PC用とスマホ用のHTMLコードを用意してデバイスによってそれぞれを読み込ませればよかったのですが、さまざまなデバイスサイズが存在する昨今、その方法では対応するのが難しくなってきました。

そこで採用されるのがレスポンシブWebデザイン
これで万事解決!

そう思われそうですが、レスポンシブにもメリットとデメリットがあります。

レスポンシブにするメリット

🙆多くの人に見てもらえる

レスポンシブにするとき使用するCSS3は現在ほとんどのブラウザでサポートされているため、多くの人に見てもらうことが可能です。

🙆同一コードを利用するため管理が楽

更新が頻繁にあるサイトの場合、これは重要になってきます。
PC用とスマホ用で2つコードかあると、どちらも更新しなければなりません。

レスポンシブで同一コードの場合、更新は1つのコードで済むので、更新忘れやスマホだけ古いまま…といったことを防げます。

またユーザーのデバイスに適した表示をするので、SNSでシェアされやすいという利点もあります。

🙆Googleに推奨されている

同一コードを利用するため、このデバイスではエラーが出るといった事態を防ぐことができユーザビリティの向上につながります。
またGoogle検索エンジンのクローラーの巡回の手間が少なくなります。
よってGoogleはレスポンシブデザインの使用を推奨しているようです。

Googleの検索順位に関係するモバイルフレンドリーや今後導入するとされているモバイルファーストインデックスにも適しています。

☝️モバイルフレンドリー
スマホでの閲覧に適したページの順位を引き上げ、適していないサイトを引き下げるGoogleのアルゴリズム。

モバイル フレンドリー テスト – Google Search Console

☝️モバイルファーストインデックス
これまでPCサイトの内容を元に評価していたのを、スマートフォンを主軸に評価しインデックス(検索エンジンのデータベースに登録)すること。
評価には様々な基準があり、今後導入予定とGoogleが発表しました。

🙆今後出てくるかもしれないデバイス幅にも対応できる

レスポンシブにしておけば今後もし新たなサイズのデバイスが出てもすぐに対応可能です。




レスポンシブのデメリット

🙅表示速度が遅くなる

同一コードのため、PCとスマホ両方のコードを読み込んでしまう、スマホでもPC用の大きな画像を読み込んでしまうため、特にスマホではページの表示速度が遅くなります。

🙅構築が大変

「同一コードなら作るの楽なんじゃない?」と思われそうですが、基本的に画面に横スクロールバーがでないよう、どの画面幅に対しても綺麗なレイアウトで見せなければならないため、工数は増え構築は繁雑になります。

🙅構築が大変

特に凝ったデザインで複雑なレイアウトだったり、対応デバイスが増えるほどコーディングは大変です。

🙅構築が大変

大事なことなのでもう5回くらい言いたい笑

🙅デザインやレイアウトが制限される

シンプルなデザイン・レイアウトでないとレスポンシブ対応はなかなか難しいです。
凝ったデザインでもなんとかなる場合もありますが、やはり表示速度が遅くなるなどデメリットが目立ってきます。

🙅スマホでのコンテンツ量が多くなり見にくくなる

テキストや画像を沢山載せたページの場合、PCでは見やすくてもスマホの小さい画面になると情報量が多すぎて見にくくなってしまいます。

🙅IE8以下は未対応

CSS3は多くのブラウザ対応とはいえ、IE8以下は残念ながら未対応です😔




レスポンシブの欠点を補うには?

欠点を説明しても、「やっぱりレスポンシブがいい!」となることは多いと思います。
構築が大変とか見る人には関係ないもんね…そうすると利点の方が多いもんね…
完成した後「なんか表示遅くね?」とか「デザイン変わってるじゃん!!」とか言われないために、では、どういった対策ができるでしょうか。

🙋レスポンシブが本当に必要か確認をする

できればデザインを作る前に、レスポンシブかどうか確認した方が今後自分の首を絞めることがなくなります。

🙋ブレイクポイントを詰める

たとえば750px以下はレスポンシブだけど、それ以上は横スクロールバーが表示されるとか、なんちゃってレスポンシブの提案もいいかもしれません。
PC、スマホ、タブレット以外で、わざわざブラウザの画面幅縮めて見るのなんてそうそうない…
動画サイトとお絵かきソフトで2画面するときくらいでしょ…でしょ!!?

ちなみにこのサイトはなんちゃってレスポンシブサイトです(

☝️ブレイクポイント
ブラウザ画面を縮めていったときレイアウトが切り替わるポイントのこと。
CSSで調整する。

🙋できるだけシンプルなデザインにする

デザイナー()としては凝ったデザインにしたいわけですよ!!!
でもそうすると自分の首が絞まるわけですよ!!!!

🙋できるだけテキストベースで作る

画像ベースだと上記のデメリットでページ表示速度が遅くなってしまうので、できるだけテキストベースで作るのが良いかもしれません。
結果工数が増えます笑

どうしてもデザイン性重視で画像を使用する場合は、スライス時に普通なら2、3枚にするところを1枚にし、さらに解像度を下げるなどしてデータを軽くすると良いようです。

🙋スマホメインで作る

スマホ用の画像やCSSを先に記述し読み込ませると、スマホの表示速度が少し早くなるかもしれません。
PCコンテンツ量が多い場合はスマホのコンテンツ量を調整することも必要です。

☝️モバイルファースト
スマホで見やすく使いやすい設計にすること。
PCに比べ画面が小さく回線速度が遅いスマホの場合、スワイプによる操作を中心に、必要最小限の情報を適切なレイアウトで表示させることが必要となる。

🙋jsでIE8以下にも対応させる

jsを利用することでIE8以下にHTML5、CSS3を対応できるようです。

IE8以下でもレスポンシブサイトを有効にする




結局どうすればいいんだってばよ

①レスポンシブが必要かどうかよく考え
②盛り込む情報を精査、スマホでも見やすい設計にし
③テキストベースでPC・スマホ共に構築しやすいレイアウト、デザインにし
④必要に応じてIE8以下にも対応させる

ということだってばよ!!

今のところ全てを網羅するようなベストな代替策は私のようななんちゃってWebデザイナーには考えもつきませんが、きっと今後いろんなアイディアがもっと生まれてくると思います。
同時に問題ももっと生まれたりしないといいね😉まじで😉

あとレスポンシブがこんなに大変って思うのは私の力量不足もあるのかも…とか…
今後もっと勉強していこうと思います!




【参考サイト様】
レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット|ferret [フェレット]
レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 : ビジネスとIT活用に役立つ情報
モバイルフレンドリーとは?対応して順位を下げないための基礎知識|ferret [フェレット]
モバイルファーストインデックスとは? SEOへの影響と対応方法
【速報】モバイルファーストインデックス、Googleの本番環境にて既に導入が開始 現在の状況と必要な対策とは?
モバイルファーストとは?スマートフォンサイトをデザインする時の考え方 | デジタルハリウッドお役立ちWebマガジン「くりたま」

参考サイト様方、本当にありがとうございます!🙇‍♀️

🎀WebデザイナーによるWebサイトの作り方はこちら!




「死滅回遊」更新しました!

サイト制作を担当した「死滅回遊」を今月も更新しました!

トップページの模様は毎月更新しています!
かわいい模様ばかりなので、私も楽しみです😊✨

そしてお礼をいただいてしまいました!
いつもありがとうございます😍

見て!!!みどりちゃんポストカードとシール☺️
最高にかわいい😭💕

しおりにつけるタグやスティック状の練り香水のインコちゃん達もめっちゃかわいくてニヤニヤしました!

マステもたくさん!ありがとう!!
早速手帳に貼ってみました

ほぼ日手帳 マスキングテープ

やばいこれ…めっちゃかわいい☺️☺️☺️☺️☺️☺️

ほぼ日の1日1ページは来年からだから、みどりちゃんシールは来年貼るのがめっちゃ楽しみです!!!
充実した手帳ライフ✌️

Webサイトをデザインする【スマートフォン対応デザインのコツ】

サーバー、ドメインもどれにするか決めて、イメージが湧いてきたらいよいよサイトデザインです!

その前に…例のアレです…✊

マルチデバイス対応について考えよう😌

スマートフォン、タブレット、PC…
いろんな機種があり画面サイズがあります。

マルチデバイスたちです。
新機種が出るたびぐぬぬ状態です。

少し前ならPCサイトとSP(スマートフォン)サイトの2サイトを切り替えれば済む場合もありましたが、現在はSP対応といってもiPhoneだけで5、6や7、さらにPlusとサイズの違いがあります。

こうなるとレスポンシブWebデザイン(コンテンツが画面幅に合わせて変化するやつ)がいいのかなと思います。
でも設計や制作の手間、表示速度が遅かったりデザインの自由度が下がってしまったり…
欠点もたくさんあるみたいです。最善ではないんですね。

とはいえマルチデバイス対応を考えると、やっぱりレスポンシブはいいなあと思います。
ソース1個ですむし…その1個の分量が多くなるから重くなるんだけどね…笑

今回はPCのみ対応か?SPまで対応か?レスポンシブにするか??
決めておきます。

なぜならデザイン段階で、SP対応・レスポンシブの場合、押さえておきたいポイントがあるからです。

📱スマートフォン用画像は倍で作る

iPhone5で画面いっぱいの幅は320pxですが、画像を作るときは倍の640pxに合わせて作ります。
そうしないと画像がぼやけて表示されてしまいます。

PCと同じ画像を使ったらなんかぼやけてる…となるので、スマホ用画像の準備が必要となります。

スマートフォン用のデザインは幅640pxで作っておけば、ひとまず大丈夫だと思います。

さらに左右の余白は40px以上にしておくとスッキリして見えます。

スマートフォン用のデザインの左右の余白は40px以上

※640pxのとき40pxの余白を作るので、320pxにすると余白は20pxとなります。

📱スマートフォンでのフォントサイズは16px以上推奨

サイトをデザインするときは、基本的にHTMLでのテキスト部分も制作しておきます。

スマートフォン用デザインの場合、フォントサイズは16px以上推奨です。
できれば18pxはほしい…!
小さくても14pxかな、と思います。

このサイトはスマートフォンで12pxなのでちょっと小さいですね。
だめじゃん!笑

そしてボタンもできるだけ大きく作ると使いやすいサイトになります。
なおこのサイトは…🤗

スマートフォン対応はできるだけやっておこう

スマートフォン普及率が上がる昨今、サイトへのアクセスもPCよりスマホからが多いです。
スマホ対応は必然といえるかと思います。

難しそうですが、先にPC用のデザインを制作して、SP用にリサイズしていくと作りやすいです。
PC用デザインを複雑にしてしまうとSP用の制作が難しくなるかもしれないので、できるだけシンプルにした方がいいかと思います。

次回は例を交えて実践していきます!
その次になるかもですが、これさえあればきっとなんとかなる!という魔法の呪文もお知らせします。

大丈夫です、スマートフォン対応こわくないですよ!👍

◀️PREV
【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説

🎀WebデザイナーによるWebサイトの作り方



【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説

前回は初級〜中級編ということで、無料のホームページ・ブログサービスについて書きました。

【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみた【WebデザイナーによるWebサイトの作り方①初級〜中級編】

今回は上級編として、独自ドメイン取得・サーバーレンタルについて書こうと思います。

トラックパッドでパソコンを操作する女の子イメージ

🙆独自ドメイン取得のメリット

・突然記事やサイトを消される心配がない
・サイトを見る人にある程度の信頼感を与えることができる
・カスタマイズ性が高い
・アフィリエイトも自由にできる

🙅独自ドメイン取得のデメリット

・費用がかかる
・カスタマイズが上級者向け

ただドメイン取得やサーバーレンタルについてはネットにたくさんやり方が載っているので、初めてでも大丈夫です。
私もできました笑

サイト構築のHTMLやCSSは少し勉強すれば、というかサイトを制作していけば大体わかってくると思いますが、javascriptやPHPは結構勉強しないと難しいかもしれません。

でもサイトのデザインカスタマイズ程度ならjsやPHPはわからなくてもなんとかなります。
なってます笑

どこで取得すればいい?

ではどこでドメインやサーバーを登録するのが一番いいのでしょうか?

CMSはWordpressを利用する場合で考えてみました。

💡手軽に始めるならムームードメイン+ロリポップ

ドメイン代やプランにもよりますが、ロリポップサーバーはスタンダードで月500円とお手頃です。
データベース30個、マルチドメイン100個です。

つまりホームページが100個、Wordpressが30個持てます!

初期費用が1500円かかりますが、ムームーでドメインを取得すれば無料に!
Wordpress簡単インストールもあります。

月々の費用を押さえつつ手軽に始めるならムームードメイン+ロリポップの組み合わせがオススメです。

💡高速・安定を狙うならエックスサーバー

こちらはサーバーのみになりますが、どのサイトを見てもオススメされているエックスサーバー。
月々の費用は数千円するようですが、高速・安定のようです。
36ヶ月分まとめて払うと月々900円みたいですね。

X10(スタンダード)プラン – 料金 | レンタルサーバー【エックスサーバー】



💡手軽かつ山ほどサイトを作るならお名前.com

ドメインとサーバーをセットで申し込めば、ドメイン1年間1円+サーバー2ヶ月間無料

サーバー費用は1年払いにすれば月々900円データベース50個、マルチドメイン無制限と大容量が使用可能です!

ドメイン1年間1円につられて私は現在こちらを利用しています笑
登録の前は気をつけてね🔽
お名前.com利用の際に勝手にはまった落とし穴



💡Whois情報公開代行を忘れずに!

他にもWebフォントが使えたりしますので詳細は各サービスのページを見てみてください!

あとドメインが決まったら「Whois情報公開代行」を忘れずにね!

ドメイン・サーバーが決まったら

サイトデザインが完成してからでも良いですが、できれば先に登録までしておいた方がいいです。
javascriptはサーバー上でないと動作しない場合もあるので、確認しながらの制作となります。

とにかく無料でも有料でもドメインとサーバーを決めて「ここで公開しよう!」というイメージを持ったら、いよいよ本格的にサイト制作です!

◀️PREV
【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみた

NEXT▶️
Webサイトをデザインする【スマートフォン対応デザインのコツ】

🎀WebデザイナーによるWebサイトの作り方



【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみた

colorboxをスマートフォンで表示させるためのカスタマイズ
のアクセスが多いので、少しWeb制作について語ろうと思います。

このブログでは漫画読んだり刺繍したりしていますが、本業はWebデザイナーです笑
正確には元Webデザイナー?

「自分のサイトを持ちたいけど何から始めればいい?」

「HTMLやCSSの基礎知識はあるけど、どうやってサイトを立ち上げていいかわからない!」

そんな方向けにまずはこちらをどうぞ。

ベッドでパソコンをたしなむインドア派な女の子イメージ

モチベーションを高めよう!

私の場合ですが一番の活力は「このサイトを公開したい!」という欲求です笑

いろんなテンプレートをみて奮起します。

ブログテンプレート一覧からテンプレートを検索しよう! | FC2ブログ

一から自分でデザインする方はこちら。

WEBデザインの見本帳|WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!

イケサイ ウェブデザイナーのWEBデザインデータベース

こちらの2サイトには本当にお世話になっています。
色んなサイトを見て自分のサイトをどんなのにするか決めます。

気に入った部分はどんどん参考にします!
言葉は悪いかもしれませんが、デザインのはじめは真似ることだと思います。

どんどん真似しましょう!
詳しくは別の記事で書きたいと思います。

とりあえず始めは「こんな感じにしよう!」というイメージを決めておきます。

公開場所を決めよう!

ここでいう公開場所とはサーバーのことです。

Webサイトはサーバーに置くことで公開されます。
その場所を示すのがhttpから始まるURLになります(このサイトなら「http://palette33.jp/」)。
さらにそのURLに含まれるのが、そのサイトを表すドメイン(このサイトなら「palette33.jp」)となります。

ドメインは誰かが使っていると同じものは使用できないため、世界で唯一のものとなります。
さらにドメインの取得やサーバーレンタルには本来費用がかかります。

その費用を「広告を表示させることで無料にするよ!」というサービスが幾つかあって
今回は初級中級編ということで、そちらをご紹介したいと思います。

🎊FC2

私が一番オススメするのはFC2です。
私も以前使っていたし、Webサイト制作の依頼は基本こちらにお世話になります。

FC2ホームページ – 無料ホームページスペース
FC2ブログ | 無料で高機能なブログ。デザインは5500種類以上

🙆メリット
無料で使っても広告はフッターに「Powered by FC2ホームページ」の1文のみ。
デザインの幅が広がります!

URLも「(アカウント名).web.fc2.com 」とfc2が短く入るだけ!

さらにブログも自由にカスタマイズ可能なのでサイトにデザインを合わせることもできます。

🙅デメリット
アカウント1つにつきWebサイト1つとなります。
複数サイトを持ちたいときは、メールアドレスを準備してアカウントをもう一つ作らなければなりません。
その切替が煩雑です。

また、1ヶ月ほど更新が滞ると一番上に広告が表示されます。
Webサイトにとってファーストビュー(スクロールせずに見える範囲)は、そのサイトの顔とも言えるとても重要な部分です。
そこが広告で埋まるなんてもったいないし、新鮮な情報を求められるWebで「あ、このサイト更新されてないな」とひと目で分かりページ離脱に繋がります。

よって定期的な更新が必要といえます。

ブログのデフォルトスマホ版は広告が多いのもデメリットです。
これは自分でスマホ対応させることで回避できますが上級者向けです。

あとほとんどのサービスでNGなアダルト向けのサービスがあります。
これはメリットかデメリットかはその人次第だと思います笑

🙆向いている人
・サイトは持って2つくらい
・更新頻度が高い
・サイトとブログセットで欲しい

🎊忍者

こちらも使ったことがあります。

無料でホームページを作成するなら|忍者ホームページ
無料でブログを簡単作成!|忍者ブログ

🙆メリット
FC2と違い同一アカウントでサイトを複数管理できます

🙅デメリット
ドメインがダサい個性派揃いです笑
(アカウント名).○○ 」なのですが、この○○の部分が
「忍者」というくらいなので「sekigaharablog.com (関ヶ原ブログ)」とか「edoblog.net (江戸ブログ)」とかあります。
「mangalog.com (漫画ブログ)」や「dou-jin.com (同人)」などもあるのでぴったりくるのが見つかれば使いやすいです。

一番無難なのが「ninja-web」とかだったと思うので、そこさえよければオススメです!

🙆向いている人
・サイトを3つ以上作りたい
・更新頻度が高い
・サイトとブログセットで欲しい
・個性的なドメインでも気にしない

🎊アメブロ

アメブロはブログのみとなります。

🙆メリット
これも以前使っていたのですが、検索順位が上位に上がりやすいです。
あと読者がつきやすい傾向があります。

アバターやアメーバピグなど独自の楽しみもあります。

🙅デメリット
大幅なレイアウトのカスタマイズができません
CSSは変更できるようですがHTMLは無理なのかな…?
テンプレートを基本にしたカスタマイズは可能なようです。

簡単カスタマイズで自分だけのブログデザインを作ろう!|Ameba (アメーバ)

またアフィリエイトが基本禁止されています。
アメブロ側の独自のアフィリエイト、もしくはAmazonと楽天なら可能ですが、アドセンスやA8等でアフィリエイトを始める予定の方には不向きです。

🙆向いている人
・ブログがあればいい
・ピグをやりたい
・アフィリエイトはやらない

あと個人的なイメージですが、アメブロは芸能人やショップの日常ブログとしての活用が多いように思います。

🎊はてなブログ

これも以前使っていました笑
こちらもブログのみになります。

はてなブログとは – はてなブログ

🙆メリット
利用者の多い「はてなブックマーク」や「はてなスター」と連携しているので多くの人に読まれる可能性が上がります。

🙅デメリット
こちらも大幅なレイアウトのカスタマイズができません
またアフィリエイトも基本禁止されています。
ガイドラインに沿っていればある程度できるみたいです!

🙆向いている人
・ブログがあればいい
・ブログだけでいい
アフィリエイトはやらないA8などでアフィリエイトしたい

こちらも個人的なイメージになりますが、自分の思いを書いたり商品を紹介したり、何かに特化したブログが多い気がします。
はてなブックマークは利用者が多いのでバズりやすい傾向もあると思います。

最後に無料サービスのデメリット

ここまでいろいろおススメしてきましたが、最後にこれら無料サービスのデメリットをあげたいと思います。

🙅規約違反などで突然凍結・削除される可能性がある
🙅サービスがいつ終わるかわからない

予算の関係でどうしても無料で始めたい方にはおススメしますが、ほとんどのサイトで言われているように独自ドメイン最強伝説です。
やっぱりCMS(WordpressやMovable Type)が安心です。
上級者向けとはなりますが、今はたくさん情報があるので調べながらやればなんとかなる面もあります。

ぜひぴったりのサービスを見つけてください!☺️

今後はデザインの基本とかコツとかwordpressの良さとか笑
書いていきたいと思います。

NEXT▶️
【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説

🎀WebデザイナーによるWebサイトの作り方



お名前.com利用の際に勝手にはまった落とし穴

もともとFC2ユーザーだったのですが、独自ドメインとwordpressにあこがれてお引っ越ししました。
その際に契約したのがお名前.com

「えっ初年度1円でいいの!?」

そうなんです。でもちょっと待って!

🙋1円なのはドメイン1年間+サーバー2ヶ月

ドメイン・サーバー1年間1円じゃないんですよ!!笑

サーバー代はデフォルトだと月1620円くらいでした。
独自SSL、迷惑メールフィルターなどオプションを自分で外して、年間でまとめて払うと、謳われている「月900円」になります。
(共用サーバーSD-11の場合)

公式のこのページを良く読んでね🔽
共用サーバーが2ヶ月無料!さらにドメイン1円!

正直ロリポップとかの方が安いし安定してるらしいですが…😌

🙋アフィリエイトが効くのはクレジットカード決済時

クレカ持ってません🙋

お名前サーバーにしてよかったこと

🙆普通に安定して使える

バズるようなサイトでもない笑

🙆Webフォントが使える

新ゴやMB101といったモリサワフォントが使えます!
本文に使用したらジャギって見にくいけどね!!

🙆データベース50個、マルチドメイン無制限

これは結構大きいけど、自分は多サイト運営してないのであまり関係ない…

Webフォントくらいしかよかったのがない~😋
ネットでおすすめされるのはエックスサーバーがダントツです。

もっと気軽に始めるならロリポ+ムームードメインがいいと思います。
職場のサイトでやってみたら(プランにもよりますが)サーバー代は初期費用無料で月500円!

私もこっちにすればよかったな~笑
お名前でも全然不具合ないけどね。ちょっと高かったよね😢



コピーライト表記に変更する【Twenty Seventeen WordPress】

Palette -acrylic-では
wordpressのテンプレート「Twenty Seventeen」を
使用させていただいているのですが
今回はフッターのwordpressリンクを
コピーライト表記に変更してみました。

参考サイト様
ワードプレスのフッターをCopyright(C)に表示して著作権を守る方法 | WordPress指南書
フッターの「Proudly powered by WordPress」をCopyrightに変更 | アフィリエイトで稼ぐ方法を全部話そうと思う

上記参考サイト様をみると、テーマの編集から

<div class=”site-info”>
</div>

内を変更するようになっていますが、
Twenty Seventeenではインクルードされているので
サーバーからフッターデータをダウンロードします。

以下のパスにある「site-info.php」をDL!

/wp/wp-content/themes/twentyseventeen/template-parts/footer

そしてsite-info内を下記のように書きました。

Copyright © <?php echo date('Y '); ?> <a href="<?php echo home_url( '/' ); ?>" title="<php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">><?php bloginfo( 'name' ); ?> </a>All Rights Reserved.

これでコピーライト完成です!

Copyright © 2017 Palette -acrylic- All Rights Reserved.

と表記されました!
年数も自動で更新されるのでとっても便利ですね☺️💕

参考サイト様方、本当にありがとうございました🙏🙏🙏

サイト、ブログ移転のお知らせ

なんとドメイン取得しました。

ということで移転しました。
今後ともよろしくお願いいたします。

サイト
http://palette33.jp/

ブログ
http://palette33.jp/blog/

あ~あこがれの~
独自~ドメインに~~
なーったーよ~♪

あわせてどうぞ!🔽
お名前.com利用の際に勝手にはまった落とし穴