マガジンのカバー画像

WEBサイトのデザインを観察する

13
自筆の「WEBサイトのデザインを観察する」の記事をまとめています~
運営しているクリエイター

#Photoshop

ワイヤーフレームの観察 vol.1

今回は、以下のサイトのアドバイスしたがって、WEBサイトのワイヤーフレームを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 書き出すサイト「WEBサイトのデザインを観察する vol.1の」のワイヤーフレームを書き出しました。紙に手書きで書いたので、写真を載せます。 《気づいたこと》 ・商品画像がかなり大きい、優先度が高い。 ・タイトルは文字サイズが大きいか、太字。 ・SNSの案内が大きい

ワイヤーフレームの観察 vol.3

今回は、以下のサイトのアドバイスしたがって、WEBサイトのワイヤーフレームを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 書き出すサイト「WEBサイトのデザインを観察する vol.2」のワイヤーフレームを書き出しました。紙に手書きで書いたので、写真を載せます。 右側に箇条書きしているのは、サイトの内容です。vol.2の内容と、vol.4の内容も記載しちゃってます~。 《気づいたこと》

【番外編】ポスターのデザインの観察

これまでWEBサイトのデザインを観察してきましたが、 今回は番外編で、とっとり花回廊の写真コンクールのポスターのデザインを観察することにしました! 観察するのは以下のポスターです。 気づいた点を、以下の画像に記載した12点に分けて書き出します! 1.3つの画像が、グラデーションでつなげて使われている。右上の画像については、空の部分が白くなっており、白部分に募集期間が記載されている。 2.キャッチコピーが記載されている。背景の写真が鮮やかなので、黒地に白文字で記載。

ワイヤーフレームの観察 vol.2

今回は、以下のサイトのアドバイスしたがって、WEBサイトのワイヤーフレームを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 書き出すサイト「WEBサイトのデザインを観察する vol.2」のワイヤーフレームを書き出しました。紙に手書きで書いたので、写真を載せます。 《気づいたこと》 ・結婚式や式場のイメージ画像が大きい ・リンクは、画像リンク+詳細ボタンを配置している ・画像が、左右にぴっ

WEBサイトのデザイン観察 vol.8

今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 観察するサイト 今回はこちらのサイトについて考察します! デザイン観察《気になったところ》 ・色使いがシックでおしゃれ ・線の細い書体が高級感があって素敵 ・暗い色の背景に写真がよく映えている 《なんのサイトか》 ・ひらつか建築のコーポレートサイト 考察: ・高

WEBサイトのデザイン観察 vol.7

今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 観察するサイト 今回はこちらのサイトについて考察します! デザイン観察《気になったところ》 ・宝石の写真がきれいで、買いたくなる ・余白多めで、高級感がある ・サイトの色合いが優しくて穏やかで美しい 《なんのサイトか》 ・NOJESS アクセサリーの商品紹介サイ

WEBサイトのデザイン観察 vol.6

今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 観察するサイト 今回はこちらのサイトについて考察します! デザイン観察《好きなところ》 ・スイートポテトがとてもおいしそう ・スイートポテトっぽい配色がとてもかわいい ・「POGG」の書体が個性的でかわいい ・アニメーションがかわいい 《なんのサイトか》 ・スイ

WEBサイトのデザイン観察 vol.5

今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 観察するサイト今回はこちらのサイトについて考察します! デザイン観察 《気になったところ》 ・書体の雰囲気が優しい ・メニューが見やすい ・余白があって読みやすい ・ボタンがわかりやすい 《なんのサイトか》 ・さい眼科医院の紹介サイト ・地域医療の一環として、来

WEBサイトのデザイン観察 vol.4

今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 観察するサイト今回はこちらのサイトについて考察します! デザイン観察《気になったところ》 ・縦スクロールで、文字が大きめ、四角のブロックに四角のブロックを重ねたデザイン(採用サイトでよく見る) ・写真多め、動きがついている ・黒、白を基調にしている ・他の採用サイ

WEBサイトのデザイン観察 vol.3

今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。 https://www.webcreatorbox.com/tech/improve-design-skills 観察するサイト今回はこちらのサイトについて考察します! デザイン観察《気になったところ》 ・左右に分割されている ・ブロック分けされている ・色合いが自然で優しい ・手書きのイラスト ・BGMで海の音が流れている 《なんのサイトか》 ・小豆島商店の紹介サイト。販