ミライのおうち

ITで生活を豊かに。 デジタルツールを使ったり使わなかったりして子育てや生活を楽しくするための方法をいろいろ模索しているミライクのスタッフmikiyokoのブログです。

ノーコードでホームページを作ってみた

あちこちでいろいろなサービスを使っていると、自分の情報がバラバラになってしまい自分自身でも「どういう使い分けしてたっけ?」というのがわからなくなる時がありますよね。

面白そうなサービスが出たらつい試したくなる私は今まさにそんな状態なわけですが、そろそろ軸となるページが作りたくなりました。

自分のコンテンツのハブになるようなページですね。

図解すると、どんなふうに用途を分けるかルールを作らねばと思ったので、取り急ぎ、住み分け方も考えてみました。あくまで暫定ですが、「こういうの書きたいけどどこがいいかな」の時の道標にはなりそうです。

さて、ホームページを作る目的も決まったことですし、早速制作に取り掛かろうと思います。

しかし私、かろうじてHTMLやCSSの勉強はしたけどしっかり一から作ったことないのと、センスの問題で簡単に作るだけのスキルはありません。

そこで、巷に溢れる、ノーコード(コードを書かなくてもいい)でも作れるプロダクトで試してみることにしました。

今回使ったプロダクトはこちら。

  • STUDIO:Webページ制作
  • Canva:デザイン作成

Webページを作る!

「STUDIO」を選んだ理由、それは「最近よく聞くしこれを機に使ってみたかったから」。

っていうかむしろ、これが使ってみたいからハブだなんだ色々理由つけてただけとも。正直言って、このはてなブログをハブにしたっていいんですよね。まあテーマ別に分けて色がつかないのがいいっていうのもあるのでとりあえずこのまま作成を進めましょう。

studio.design

今の所私が作りたいレベル感だと無料プランの範囲でできそうなので、脇目も振らず早速チュートリアル動画を見てみます。ラインナップが豊富。

ブロック単位で作る感じがちょっとNotionっぽい?少し癖があるけど、慣れるとすごく使いやすいです。さくさくページが作れます。

そして、ページに使える素材も、Notionでも活用している「Unsplash」のフリー素材が使えるので、手元に素材がなくてもそれっぽいカッコイイデザインができます。

ビデオチュートリアルがとにかく分かりやすくて、みながら触ってればある程度感覚が掴めます。

オリジナルのデザインを織り交ぜる!

なんかちょっとオリジナルでデザインを作りたいと思ったら「Canva」も便利です。こちらも無料でさまざまなサンプルデザインを組み合わせてオリジナルのものができます。(このはてなブログにもデフォルトで入っていて超便利)カバー画像はCanvaで作ってみました。

 

完成!

というわけで、半日もかからずページが出来上がりました。

mikiyoko.studio.site

チュートリアルのまんまだけど、すごくなんかそれっぽい。なにより、HTMLとかPhotoshopとか、特別な知識がなくてもドラッグ&ドロップでしかも無料で公開までできちゃったわけです。すごいなほんと。簡単すぎる。子供でも作れるから今度教えてみようかな。

ちょっとずつ手入れしてみたいと思います。