見出し画像

同志社中学校の先生から学ぶHPの作り方

こんにちは。かいちょーです。

今回は、5月に同中学びプロジェクトで行われた「Webサイトを作ろう!」という学びプロジェクトについて紹介しようと思います!

今回は、動画編集やHP作成や様々なことをするマルチクリエイターであり、同志社中学校で自由研究のアドバイスなどをしてくれている先生による学びプロジェクトでした。今回学んだことを文にしてみたいと思い、今回のnoteを書いてみました。

皆さんの中で「HPを作ってみたい!」「HPの作り方を知りたい!」という方がいれば是非読んで欲しいです。

同志社中学校のHPの記事でも軽く紹介されていましたが、ここでもどのようなことを学んだか。僕なりのWebサイトを作る上での大切なことなどを紹介していこうと思います。

【今回紹介されたツール】
「STUDIO」というノーコードでHPを作れるツール今までWixやSpark Pageなどのノーコードで作れるツールを使ったことはありましたが、STUDIOというものは使ったことがありませんでした。

画像1

【ちなみに、Spark Pageで作ったサイトはこちら!】
自由研究で調べた内容についてのサイト
コロナ禍における世界各国の政治について調べ、英語でまとめました。
【STUDIOというツールについて】
使用できるのはパソコンのみ
Google Chromeじゃないとできない
今プログラミング言語として必要とされているHTMLやCSSの知識がなくても簡単に作ることが出来る。
無料で多くの機能を使うことが出来る。(共同制作、アニメーション、Formなどなど色々なことが出来ます。)課金もある。

料金プランについて詳しくはこちら!

画像2

ここからは今回の話について書いていこうと思います。

1.Webデザインはコーディングからノーコードに変わってきている

まず、現在のWebデザインはCSSやHTMLを使うようなコーディングのHP作りからノーコードに変わっていっているという風に紹介されました。

現在、技術が発展していっておりノーコードでもHPを作れるツールやアプリが沢山増えています。コーディングでHPを作るよりもノーコードの方が簡単に作れるし、コーディングで0から作るより良いデザインでセンスが良いHPを作れます。

今回の学びプロジェクト紹介してもらった。STUDIOというツールは細かい所まで作ることが出来るのでこんなに良いツールに出会ったことはないなという風に思いました。

2.色々なWebサイトを参考にする

ノーコードでHPを作れるといっても、実際に作ってみると難しいなと感じます。そのために一番大切なことは色々なwebサイトを見て真似をしてみるということです。

色々なwebサイトを参考にすることで、「このような作り方をすることも出来るか」「こういうデザインいいな」などということがわかります。

そして、STUDIOにはテンプレートがたくさん入っているのでそのテンプレートを編集してHPを作るというのもいいですが、それだと字がずれてしまたり色々バグが発生してしまうので白紙から作って、既に存在しているサイトをマネしながら作るのがおすすめです。

3.Webだけでなくデザインをする上でのコツ

WEBサイトを含め先程も書きましたがデザインをする上で最も大切なのは真似してみるということです。

真似する以外にも大切なことが1つあります。

それは

「余白」

です。

余白がないと色々ごちゃごちゃしてしまい、見る側に「結局何が言いたかったの?」と思われてしまいます。僕自身実際にスライドなどを作っていく中で結構ごちゃごちゃしたようなものを作っていたので気をつけないとなと思いました。

詰め込みすぎたものの例(すぐきプロジェクトで作っているデジタルブック)

画像3


余白を上手いこと作れているものの例(すぐきプロジェクトで作っているデジタルブック)


4.その他のことについて

今回の学びプロジェクトではwebサイトの作り方以外にもツールやサービスの紹介をしてくれました。

1つ目がCanva
本当に無料なのと思う程の豊富なテンプレート、フォント、素材そして汎用性の高さ。プレゼンテーションをはじめとしポスター、ロゴ、アイコン、レポート、動画など様々なものを作ることが出来るツールです。

2つ目はpinterest
pinterestでWebデザインと調べるとさまざまなデザイン案が出てきます。デザインをする上で参考にすることが出来るサイトなので、是非使ってみて下さい。

まとめ

今回は、webサイトを作ろうのまなぷろを紹介しました。また今後どんな感じでHPを作っていくかについてあげていくので、フォローの方よろしくお願いします。

最後にギャグで締めます



野洲駅の電車料金安っ!

フォロー、好きよろしくお願いします!

アンケートももしよければよろしくお願いします!


この記事が気に入ったらサポートをしてみませんか?