大学生のモノづくり記録

Webページ作成(主にHTML、CSS、PHP、jQuery)、ArduinoやRaspberry Piを使って物作りの勉強した記録を載せたり/趣味のことを書いていきたいなと思います。(クオリティはかなり低いです)

Webサイトのレイアウトやデザインが個人的に難しすぎる

 投稿が止まりすみません。課題に追われていました。  今回は、今まで作成してきたポートフォリオサイトのデザインの事について記事にしていこうと思います。  やっぱり作成するからには、じぶんが納得いくようなサイトの構造を作りたい、構成したとよく思いますし、この作ったサイトをかっこよく、美しく、渋くとデザインへのこだわりをノートなどに書くのは、簡単ですが、実際にCSSを使って作ってみようと思うと手が進まないものなので、今回は、この記事を作成すると同時に自分も勉強していこうと思います。 

  • サイトのレイアウトについて  ・レイアウトとは:レイアウトとは、自分が作成したものを何処に配置していくかということで、私たちの身近なレイアウト例としては、部屋の配置です。ここにテレビを置きたい、ここに冷蔵庫、ここにテーブルを置いていこうといったものがレイアウトです。Webサイトのレイアウトもここに名前のブロックを入れて、ここには、ToDoリストでも入れてみようといったものです。  ・Webのレイアウト例   Webのレイアウトの例としては、様々なモノがあります。   1:シングルカラムレイアウト     シングルカラムレイアウトは、サイドにコンテンツを定めず1つのカラムが縦に並べているスタイルで、スマホなどのサイトは、この構造が多いと思います。

  2:マルチカラムレイアウト      マルチカラムレイアウトは、1つのページを様々に分割する表記するレイアウトで、Webのサイトでは、この表記が多いと思います。例としては、左にメニューバーがある右には、選択したコンテンツを表示しているものです。

  3:グリット型レイアウト     グリット型レイアウト、簡単に言ってしまうとメルカリなどの表示の仕方で、1つのページに様々なコンテンツを表示してありそれを選択していくといったレイアウトでSNSでの活用が目立つと思います。  

参考:ドコドア

docodoor.co.jp

  • 今現在のポートフォリオサイトデザインについて  今回のポートフォリオサイトのレイアウトは、シングルカラムレイアウトで作成していきました。しかし、デザインがはっきり言ってまだ、美しいとも言えませんこれは、今後デザイン力を鍛えていく必要がありますね。 分割で貼っていきます。  f:id:kyozinnlove55:20200710030336p:plain f:id:kyozinnlove55:20200710030403p:plain f:id:kyozinnlove55:20200710030419p:plain

背景は、木目で渋くいこうとしましたが、配色があれちょっと違和感があるなとおもいますので、次回以降治していきます。

今回は、デザインやレイアウトについで記事にしていきましたが、はっきり言ってデザインは、人それぞれです。流行っている服を見てコレダサくない?と思うのと一緒だと自分は、思っているので、デザインは、自分が納得するようなものを作成していきましょう。