asamin
#1日1サイトレビューをまとめています。
模写＆レビュー。今日は画像に書き込んでみました。
今日も模写＆レビューでやってみました。 http://okamoto-dental.clinic/ 【概要】 岡本歯科医院のコーポレイトサイト？ 【ターゲット】 歯科医院を探している人の中でも美意識が高い人かな？ 【メインビジュアル】 最初に口だけで笑っているアニメーションが目を引く。 写真が角丸になっていて優しい印象。 【コンテンツ】 全体的に色合いやシェイプの使い方が優しくて女性的な印象を受けます。 フォントは中ゴシックであまり使ったことがなかったですが、お洒
【概要】 杉山家具製作所のコーポレイトサイト。 今回はCFの授業でWebサイト模写をやってみました。せっかくなのでコチラのサイトでサイトレビューもやってみます。 【ターゲット】 家具をオーダーメイドで作りたい人や企業かな？ サイトからはこだわりを持つ人や物を大事にする人が惹かれそうな雰囲気を感じます。 【メインビジュアル】 製品の写真がゆっくり拡大して行ってゆとりを感じる。 【コンテンツ】 余白をたっぷり使っていて高級感を感じる。 フォントは凸版文久明朝。明朝体だけど
https://www.felissimo.co.jp/laughrees/ 【概要】 フェリシモの企画サイト。 【メインビジュアル】 ・「ファッション×漫才師」というキャッチが大きくはないけど、帯の上に左から右へ流れていて可愛く目立っている。 ・「購入者限定スペシャルファンブックプレゼント」といういい文言も、キャッチの近くで動いていて目に止まりやすく配置されている。 【コンテンツ】 ・写真が出てくる時の動きがポップな動きでかわいい ・たくさん装飾を使ってごちゃっとして
こんにちは。最近の学習はCF課題のデザインカンプをみてコーディングをするコーディング実践を行っていました。すごく楽しいですが、難しいところも出てきて詰まることもしばしばです。 今回は、苦戦した擬似クラス「first-child」「last-child」について書き留めておこうと思います。 最初にこのナビゲーションメニューを見た時に、 「最後のliのgackgroundとcolorを変えればいいんだ」と思い、 こう書いたところ、 colorだけ効いてない。。。となり、考え
●メディアクエリとviewport ・viewport スマホサイトを作る際に書くmetaタグ「viewport」（必須！） <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> （ 幅はスマホに合わせて、初期の倍率は1.0[等倍] ） ・メディアクエリ メディアクエリは、デバイス幅ごとにCSSの記述を切り替えるコード @media screen
職業訓練時代コーディングした時に、ボックスモデルとclassの命名については散々迷って悩みました。今回しっかり学習して、スムーズにコーディング出来るようになりたいです。そのために学んだ事をここに書いていきます。 ● デザインカンプからしっかりボックスモデルを考える。 ● デザインの共通を見極める。 ・共通で使えそうなデザインのときは汎用的なclass名。 → section,button,content etc... →○○_wrapper,○○
昨日からクリエイターズファクトリーのHTML/CSS実践に入りました。 学習も大事ですが、実際コーディングしてwebサイトを組んでいくのはとても楽しくてワクワクします。Adobe XDを触りながらコーディングしていくのは初めてなので、XDも触れながら覚えていきたいと思います。
1日1サイトではなくなっていますが、ゆっくりやっていきます。 【概要】 スタジオアリスのインターン募集サイト。 【メインビジュアル】 ・スタジオアリスのインターン風景の写真が背景に流れている。上は左から右へ。下は左から右へ。 ・写真が少し暗くなっていて白の「スタジオアリスのすごいインターン」のキャッチをみやすくしている。 【ナビ】 ・ホバーするとかわいいアイコンが出現。白のアイコンなのでナビの文字を邪魔しない。 【コンテンツ】 ・コンテンツを移動するとき、みて欲しいと
前回のnoteではバナートレースをやりましたが、やっぱりフォントにはいつだって悩まされます。トレースでは「何のフォントかな？」くらいですが、１からデザインをするとフォントでもかなり雰囲気が変わってくるのでたくさんの引き出しを持っているに越したことはありません。 前職の広告デザイナー時代？に使っていたフォントもこのPCにはインストールしていないので、思い出しながら今回のnoteでは、フォント探しの旅に出ようと思います。 ゴシック体筑紫A丸ゴシック https://fonts.
バナートレース第二弾。 MUSEEのバナーデザインはよく見かけるのですが、いつも色使いが可愛くて大好きです。水色とピンクの組み合わせは夏っぽくなりがちですが#b6d305の緑を使う事によって新春の雰囲気が出ています。背景に使われている市松模様も素敵。お正月の雰囲気は和風なデザインになりがちですが、こちらはPOPでかわいいかつお正月な素敵なバナーです。 トレースはフォントが廻想体だと思ったのですが、ちょっと違って失敗。フォント選びは永遠の課題ですね。今のPCはあまりフォントが
昨日は疲れて #1日1サイトレビューお休みしました。。。またお休みしながらでもポツポツやっていきたいと思います。 【概要】 NPO法人ezorockのwebマガジンサイト。 【メインビジュアル】 ・背景の色や質感、左に置かれているキャッチの帯が「自然、ナチュラル」な雰囲気で統一されている。 ・写真が縦にスクロール出来る。 ・MENUをクリックするとハンバーガーメニューが出てきて、アイコンが ×に変化するのがかわいい。 ・scrollをホバーすると下に配置された線が長くなり
【概要】 「すっぽん小町」公式ブランドサイト 【メインビジュアル】 ・背景がピンクのボーダーでかわいい雰囲気。 ・写真が横にスクロール出来る。箱に入った▶︎でクリックしたら写真が横に流れるよう誘導されている。 ・MENUをクリックするとハンバーガーメニューが出現。 ・MENUの中のみて欲しい？コンテンツが色分けされている。 ・メインビジュアルの最後が波線になっていてかわいい装飾。 【コンテンツ】 ・丸く切り抜かれた写真が使われている。写真の下にカラフルなシャドウが引いてあ
https://junzo.com/ 今日から出来るだけ#1日1サイトレビューしていきたいと思います。 まずこちらのサイトから。 【概要】 建築設計、デザインなどトータル・クリエイティブを手掛ける黒田潤三アトリエさんのコーポレートサイト。 【メインビジュアル】 ・施工された建築物の写真が右から左へ出現する。（イージングがかかっている）出現後もゆっくり写真が動いている。 ・左下にずらして大きく社名を配置している。 ・MENUは横組みのものを縦に配置している。 ・MENUを
今日からクリエイターズファクトリーのデザイン初級に入りました。 デザインとはなんぞやから始まり、バナートレースまで。 久々のPhotoshop（約半年ぶり？）だったのとMacの操作に慣れないのとで切り抜含め２時間ほどかかりました。。。しばらくリハビリがてらバナートレースもしっかりやって速度と精度を上げていきます！バナートレースは約２年半ぶりですが、色んなデザインに触れられて発見もあり楽しいですね♪ 帯のところの上の文言カーニング開すぎたかな？トレース元しっかりみないといけま
職業訓練に通っていた頃大好きだったコーディングですが、 学び直すと結構変わっていたり、忘れていたりするところがあるので、 こちらにメモとして残していきます。 _____________________________________ HTML ●フォルダ構造 相対パス → ../○○○○○ で上の階層を参照する ルート相対パス → /○○○○○ で必ずルート（一番上の階層）に戻る（ローカル環境では動作しない） ●テーブル <table></table>タグ
