marca / works

実務未経験からWebデザイナーを目指していたら孤高の社内IT&Web担当になっ…

marca / works

実務未経験からWebデザイナーを目指していたら孤高の社内IT&Web担当になっていた者です / 音楽, イラスト, 文房具, 写真, アースカラー, 🐻がすきです / やりたいことが増えてきたので活動LOG用にnote再開しました

マガジン

  • #1日1サイトレビュー

    素敵なデザインをストックするためにレビューしていきます!

最近の記事

虎ノ門ヒルズ、虚無

    • 久方ぶりに、またnoteを再開しようと思います。Webデザインだけでなく、ライティングや動画編集、RPAなどDX関連に手をつけて何事も中途半端ですが、アウトプットしていけたらなって思います。ヤー!

      • 【day73】新宿村スタジオ #1日1サイトレビュー

        【概要】 東京・新宿にある全39室の大規模レンタルスタジオの公式サイト 【選んだ理由】 要素がでてくる動きのバリエーションや、カラーリングが新鮮だったから 【参考になるデザイン(PC)】 ・ファストビューは、大きめフォントでサイトタイトル、SNSリンク、ヘッダーメニュー、優先度の高い「Contact」「Resister」「Login」のボタン、ニュースリンクが見えるレイアウトになっている ・壁っぽいグレーのテクスチャの背景にあわせて、全体的にグレーのカラーリング →そのな

        • 【day72】ミニフジコ 小さくおいしいリンゴの物語 #1日1サイトレビュー

          【概要】 青森県三戸町(さんのへまち)生まれのミニりんごの商品ページ 【選んだ理由】 若者受けしそうな可愛いデザインで、りんごをキャラクターのように紹介しているデザインが新鮮だったから 【参考になるデザイン(PC)】 ・商品だけ写した写真ではなく、可愛い女性といっしょに映った写真を使用 →ストーリー性を感じられたり、実際の大きさが伝わる ・メニューリンクは配置せず、ページ右下に購入ページへのリンクを配置 →ボタンが右周りで回転していて目立つ ・各メニューエリアの要素が上

        虎ノ門ヒルズ、虚無

        • 久方ぶりに、またnoteを再開しようと思います。Webデザインだけでなく、ライティングや動画編集、RPAなどDX関連に手をつけて何事も中途半端ですが、アウトプットしていけたらなって思います。ヤー!

        • 【day73】新宿村スタジオ #1日1サイトレビュー

        • 【day72】ミニフジコ 小さくおいしいリンゴの物語 #1日1サイトレビュー

        マガジン

        • #1日1サイトレビュー
          73本

        記事

          【day71】株式会社オロモ #1日1サイトレビュー

          【概要】 プロジェクトデザインやシステム、フォトグラフィをあつかう会社のコーポレートサイト 【選んだ理由】 写真の色味と切り取り方、使い方が個性的でリラックスした感じがあるから 【参考になるデザイン(SP)】 ・ロゴに合わせているのか、ボタンが小さめの円になっていたり、曲線の要素が多い →サイトの雰囲気とマッチ ・サイト全体で色数を減らしていてシンプル、すっきりした印象がある ・フォントは色ではなく、大きさとウェイトで表現 ・余白もたっぷり使って、文字情報が整理されている

          【day71】株式会社オロモ #1日1サイトレビュー

          【day70】北海島プロジェクト #1日1サイトレビュー

          【概要】 北海道中、北海道と世界が繋がっていく、オンラインコミュニティ「島プロ」の公式サイト 【選んだ理由】 イラストとカラフルな色使いが印象的。 色数が多くてもごちゃついていないのはどういう要素のおかげなのか分析! 【参考になるデザイン(PC)】 ・ファーストビューはプロジェクトタイトルと北海道の魅力を表したイラストが一面に表示されている →スクロールできることを伝えるために「SCROLL」が表示、下向きにラインも伸びるデザイン ▼PCサイズでは左側に配置されている「

          【day70】北海島プロジェクト #1日1サイトレビュー

          【day69】CHILL OUT(チルアウト) #1日1サイトレビュー

          【概要】 現代人に必要な “安らぎ” と“パフォーマンス” をサポートする瞬間リラクゼーションドリンクの公式サイト 【選んだ理由】 MEFILASさんの制作noteをみて感激して、自分なりにサイトレビューしたいと思ったから 【参考になるデザイン(PC)】 ・商品の缶の浮遊感が「リラックゼーションドリンク」というコンセプトを表現している! →缶が動く速度もゆったりしている ・各エリアではエリア名が背景で回転しながら円形に配置してあったり、大きめのフォントで配置してあったりす

          【day69】CHILL OUT(チルアウト) #1日1サイトレビュー

          【day68】紬かけつぎ店 #1日1サイトレビュー

          【概要】 愛知県一宮市でかけつぎ(かけはぎ)店のサイト 【選んだ理由】 一般的なWebサイトではないレイアウトで、とっても柔らかい印象に惹かれたから。 →レイアウトやイラストの使い方などを分析 【参考になるデザイン(PC)】 ・かけつぎのイラスト糸の線画でページのエリアや導線が誘導されているデザイン →ページ下部に向かって、かけつぎをするところからの修理がおわった様子までの工程がエリアの内容にあわせてレイアウトされていて、ストーリー性を感じる! ・グローバルナビゲーション

          【day68】紬かけつぎ店 #1日1サイトレビュー

          【day67】電気ケトル特集ページ/タイガー魔法瓶 #1日1サイトレビュー

          【概要】 タイガー魔法瓶の電気ケトルの紹介LP 【選んだ理由】 写真素材とフォント、色合いがナチュラルにマッチしていると感じる。 デザインの組み合わせを分析! 【参考になるデザイン(PC)】 ・ファーストビューはTVCMと同じ印象的な動画が白枠を残して大きく配置 →うっすら青みのある動画だから、白色のコピーの可読性を保っている ・SCROLLの表示はフォントと縦に細ライン →動画に重なっている部分は白、それ以外は黒。ラインの可読性を上げている? ・グローバルナビゲーショ

          【day67】電気ケトル特集ページ/タイガー魔法瓶 #1日1サイトレビュー

          【day66】株式会社Roots #1日1サイトレビュー

          https://rts.tokyo 【概要】 企業イベントの企画・制作チームの公式サイト 【選んだ理由】 親しみのあるイラストとデザイン。イラストとマッチしたデザインはどういうものがあるか分析したい。 【参考になるデザイン(PC)】 ・どのエリアも、イラストや、モヨっとした形のイラスト背景が動いていて、サイトに動きがある ・関わるメンバーのイラストが各イベント事例に表示されていて、ユーザにはどういう人が担当しているのかがわかって信頼度があがる ・各エリア名が英字の縦書き

          【day66】株式会社Roots #1日1サイトレビュー

          【day65】名東電気工事株式会社 #1日1サイトレビュー

          【概要】 電気工事・電気通信工事・土木工事の測量、設計、施工などを行う企業のコーポレートサイト 【選んだ理由】 TOPページの動画背景とスクロールしたときの動きが格好良いから 【参考になるデザイン(PC)】 ・TOPページのファーストビューからつながっている、背景の動画は、企業が関わっている電気設備などにフォーカスがあたっている動画 →ドローンで撮影されている部分は広大さ、関わる事業の広さを感じる ・TOPページの下層ページへのリンク「View More+」のリンクは、ホ

          【day65】名東電気工事株式会社 #1日1サイトレビュー

          【day64】株式会社JEMS 環境マネジメント事業 #1日1サイトレビュー

          【概要】 環境情報で企業のSDGs・ESGの取り組みを共創する企業の公式サイト 【選んだ理由】 ロゴを彷彿させるような抽象的な形の画像と、ボタンリンクのデザインが印象的だったから 【参考になるデザイン(PC)】 ・最近みかけるような円にラインが差し込まれるようなリンクボタンのデザイン →スタイリッシュな印象で、事業内容にもマッチ! ▼ボタンにホバーするとラインが円中心に動くデザイン ▼詳細ページへの遷移する文字リンクにはライン長めのデザイン ▼ページトップリンクは縦

          【day64】株式会社JEMS 環境マネジメント事業 #1日1サイトレビュー

          【day63】株式会社CRAZY(株式会社クレイジー) #1日1サイトレビュー

          【概要】 CRAZY WEDDING、IWAI OMOTESANDOなどの事業を展開する会社のコーポレートサイト 【選んだ理由】 背景のアニメーションやメニュー内の動きが新鮮だったから 【参考になるデザイン(PC)】 ・ローディング画面からファーストビューへの遷移アニメーションが凝ってる! →整列したドットが浮かび上がって集約して、ピンボケしたようにふわふわ浮かぶ背景アニメーション →希望や夢のような明るい印象 ・ファーストビューはロゴ、コピー、メニュー、SNSアイコン

          【day63】株式会社CRAZY(株式会社クレイジー) #1日1サイトレビュー

          【day62】社会福祉法人小浜会 こどもの丘ナーサリー #1日1サイトレビュー

          【概要】 長崎県雲仙市の企業主導型保育園のサイト 【選んだ理由】 保育園のサイトを作ってみたいなあと思っていて、参考サイトを増やすため! 【参考になるデザイン(PC)】 ・エリアを本に見立てて本をもっている手、ページの両サイドやページ最下部に植物、各エリアのあしらいに園児や生き物の手書きイラストが配置されている →手書きのイラストが多用されていることで楽しい、あたたかい、にぎやかな印象を与える ・ヘッダーはスクロール追従ではなく、各ページにあわせたイラストと一緒に配置 →

          【day62】社会福祉法人小浜会 こどもの丘ナーサリー #1日1サイトレビュー

          【day61】さい眼科医院 #1日1サイトレビュー

          【概要】 埼玉県川越市の眼科のサイト 【選んだ理由】 今まであまりレビューしていなかった2カラムのサイト →PCサイズとSPサイズのデザインの違いなどを分析! 【参考になるデザイン(PC)】 ・ページの左サイドにシンボルマークと英字縦書きの病院名、ハンバーガーメニュー、紙飛行機のアイコンがついた「CONTACT」ボタンのエリアがナビゲーションとして固定表示 →ハンバーガーメニューをクリックすると、サイトが少し黒っぽく透過され、左側からメニューがスライド表示される ・リンク

          【day61】さい眼科医院 #1日1サイトレビュー

          【day60】福岡市東区の電気屋 カノデンキ #1日1サイトレビュー

          【概要】 福岡市東区美和台・和白・新宮町・古賀市を中心に、電化製品の販売・修理、パソコンサポート・リフォーム・ハウスクリーニングなどを引き受けている電気店のホームページ 【選んだ理由】 地域特化型のサイトで、親しみやすさが伝わるサイトだと感じる →親しみやすさ、距離のちかさ?はどの要素から感じるのか? 【参考になるデザイン(PC)】 ・ファーストビューはキャッチコピーの「相談できる(まちの)電気屋さん。」の文字や写真が順番に弾むように表示される →表示のアニメーションや笑

          【day60】福岡市東区の電気屋 カノデンキ #1日1サイトレビュー