ろん

webデザイナー。 思考の整理と言語化の練習。

ろん

webデザイナー。 思考の整理と言語化の練習。

マガジン

  • webデザイン

最近の記事

勝手にサイト分析005 ハッコウアンドサンド

URL 第一印象ロゴやパッケージのモチーフを取り入れ、ポップで可愛いサイトになっている。 ターゲット下記のようなコピーがあるので、健康に気を使い始めた30代女性だと予想。 「さあ、カラダに遠慮せず、じぶんにやさしく、甘やかそう。」 「さまざまな体調トラブルの原因となる“グルテン”を含む小麦粉を使わずに、」 使用フォントメイン…stolzl 日本語…あおとゴシック 配色背景・CTA:#33A1DB テキスト:#c4a25c デザインポイント一般的に、食品に青色は合わ

    • 勝手にサイト分析004 有限会社モリカワ

      概要: 有限会社モリカワは神戸にて、容器・梱包資材など包装資材の卸売・小売業を中心に、カフェ・Eコマース事業など幅広く事業を展開しています。人と人との関係を大切に、人とモノを繋げるお手伝いをいたします。 ターゲット予測: 加工食品会社・コーヒーショップの担当者 目的予測:会社の魅力を伝え、問い合わせを増やす 伝えたいこと予測: 人と人・事業内容 文字(見出し): h2 : DMsans PC 80px SP 40px、h3:PC 24px SP 22px 文字(本文):

      • 勝手にサイト分析003

        備忘録のために。勉強のために。 軽く参考になった部分とか感想とかnoteに記録していきたいなと思います。 深く考察するのは続かないので、まずは継続することを目標に。 MARGOT PRIOLETパリで活動するメイクアップアーティストのポートフォリオサイト。 うわぁめちゃくちゃ可愛い!!! 2色なのに映えてて美しくレトロ可愛いサイト。 フォントはRoslindale Condensed。 カラーは赤#f20e0eと黄白#fffeef フォントは尖っててゴージャスだけど丸みが

        • 2022年8-9月|観たもの読んだものまとめ

          本プロジェクト・ヘイル・メアリー(上・下) 映画「オデッセイ」の原作著者の最新本です。 めちゃくちゃ良かった。何書いてもネタバレになるので書けないもどかしさ。笑 科学用語がたくさん出てきましたが、科学無知でも読みやすかったです。科学の部分よりも、登場するキャラクター同士のコミュニケーションと、立て続けに起こる致命的な問題に対してどう解決していくかが見どころ。 ネタバレを一切見ずに読んでほしい。 眠れなくなるほど面白い 図解 聖書聖書のモチーフが分かると、映画でも小説でも見

        勝手にサイト分析005 ハッコウアンドサンド

        マガジン

        • webデザイン
          8本

        記事

          2022年7月|観たもの読んだものまとめ

          本インプット・アウトプットが10倍になる読書の方程式 2つの異なる視点から、抽象化させて法則を応用させる。 シャープな仮説をすぐに立てられる人は、自分なりの法則をストックしている サイトリニューアルの教科書リニューアルではなくても、サイトをデザインする上で使える内容だった。 ・どんなユーザーに ・どんなステップで ・どんなストーリーで ・どんなアクションをさせたいのか を意識してサイト作成・分析してみようと思う。 ビジュアルのストックではなくて、意図のストック。 映画

          2022年7月|観たもの読んだものまとめ

          図解 聖書まとめ1 アブラハム編 

          せっかくなので、理解を深めるためにまとめながら読書。 参考はこちら アブラハムは、ノアの息子セトの子孫。  神の命により、甥のロトと長い旅に出る! 2人「財産も増えたし、別々に暮らそ。」 アブラハム「カナン(現代のパレスチナ)行くわ」 ロト「ヨルダン側の川の低地で暮らすわ」 しかし、その低地は悪徳の町、ソドムとゴモラとして有名でした。 神「ちょっと天使派遣して様子見るわ。あまりに酷かったら、滅ぼすね。」 天使がソドムに向かってると気づいたアブラハム。 アブラハ

          図解 聖書まとめ1 アブラハム編 

          #毎日ロゴ 6月まとめ

          ちょっとしたデザイン筋トレに、毎日ロゴを始めました。 時間制限は、30分-1時間以内。 反省も含めて、まとめましたので見ていただければありがたいです。  instagramはこちらから https://www.instagram.com/okr_illust/ ここまで見てくれてありがとうございました。 毎日投稿ではないですが、継続って大事なと思いました。 何回かやってたら、イメージをすぐに反映できたり、試行錯誤するスピードが速くなった気がします。 7月は、もっといい

          #毎日ロゴ 6月まとめ

          勝手にサイト分析 _002 KALPA

          輪島のカフェ 〈サイトの目的〉 こだわりを伝え、お店にきてもらう 〈構成〉 ・FV ・PICK UP(ニュース・輪島朝市・観光情報・メディア) ・ABOUT ・内観のスライドショー ・食事メニュー ・販売している美術工芸品の紹介 ・輪島塗について ・輪島塗とは ・ニュース ・フッター できるだけ多くビジュアルでの訴求をしていて、こだわりや洗練さを感じさせる。 輪島塗についてのコンテンツがかなり豊富。 「食事だけでなく、使われている食器まで楽しんで欲しい」という意図が

          勝手にサイト分析 _002 KALPA

          Webサイト分析_001

          阪南大学入試サイトどのタイミングでも資料請求ができるように、追従出来るようになってる。 縦に配置することで、情報の邪魔にならないよう工夫されている。 (実際にスクロールすると、うまく余白に収まっている) 最新情報については、重要とはいえ見せたい度は低いので、FV〜次のセクションの境界線に配置されている。 横並びにすることで、より多くの情報をコンパクトにして伝えられている。 全体的に色は多用せずに、ロゴカラー含めシック。 クールで熱意がある印象をもつ。 イベント情報が上部

          Webサイト分析_001

          文章は、軽〜く自由に書いていい。 「書く習慣」を読んで

          僕は文章を書くのが苦手で、うまく書きたいなと思ってもすぐに挫折して、結局読む専門で生きてきた。 運良くこの本に巡り合って、今、書く衝動が抑えられない。のでズラ〜っと書いていく。 Twitterでチラッと流れてきた、「書く習慣」いしかわゆき著。 書く習慣、身につけたい!と思って即kindleで購入したけど、これからの人生を変えるかもしれない。買って大正解だった。 文章は、もっと自由でいい。文章も、イラストも、写真も、ファッションも、デザインも、「こうすればキレイに見える」

          文章は、軽〜く自由に書いていい。 「書く習慣」を読んで

          中村文則著 教団Xメモ

          いいなぁと思った文章をメモしたので、紹介します。 くよくよ悩むことが、ちょっとは別の角度から見ることができるかもしれません。「あーあ、また脳が悩んでる。面倒くさいなこの原子の結合体は」という風に。 p58 原子たちには元々、意識を作り出す能力が備わっていた。実際にこれは真実だと私は考えています。なぜなら、今こうして原子の集合体である我々の脳が、意識をつくっているのだから。 p93 意識には、つまり我々の存在には意味がある、ということになる。人間的な概念での「意味」とは違

          中村文則著 教団Xメモ

          javascript ファンクション(関数) 勉強メモ

          ファンクションとは よく使う処理を、1つにまとめたプログラム。 同じ複雑な処理を何回も何回も書いてると大変。1回まとめておけば、必要な時に呼び出して利用する事が出来るのです。 ファンクションの書式 function ファンクション名(要求するパラメータ) { 処理内容 } 例:税込価格を計算するプログラムを作る場合 //ファンクションの設定 function total(price) { const tax = 0.1; r

          javascript ファンクション(関数) 勉強メモ

          【progate jquery 上級編】 indexメソッド

          課題:変数clickedIndexを用意し、indexメソッドとthisを用いて、クリックしたindex-btn要素のインデックス番号を代入してください。​ ①クリックされたボタンのインデックス番号を取得 ・varを付けることで、変数を宣言することができる。変数名は$(ドルマーク)を添えて。 var clickedIndex =$('.index-btn').index($(this)); ここでの$(this)は、「クリックイベントが発生したindex-bt

          【progate jquery 上級編】 indexメソッド

          【jquery道場コース中級編】 レッスン一覧をつくろう

          .text-contentsは非表示にしておく。=display:none; 1 各レッスンのアイコン画像にマウスを乗せる➡ その下にレッスンの説明が出てくるようにする。 $('.lesson').hover(function(){$(this).find('.text-contents').css('display','inline-block')} .lessonをホバーすると、.lessonの子孫要素 .text-contentsをdisplay:inline-

          【jquery道場コース中級編】 レッスン一覧をつくろう

          【progate備忘録】 Jquery モーダルの実装

          1.モーダルが表示されているので、非表示に。 display:none;を追加。 .signup-modal-wrapper { display:none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 100;} 2.指定箇所をクリックすると、表示されるようにする ポイント  .signup-showをクリ

          【progate備忘録】 Jquery モーダルの実装