共に学び、共に成長する

検索

ユーザー ハッシュタグ

JOラファエロ

クリエイティブ・ゴリラ

現在値 0.000300BTC
時価総額 3.000000BTC
発行VA数 10000VA
クリエイティブ・IT関連の情報を発信しているWebメディア「ジャングルオーシャン」をゆる〜く運営しながら、日々くだらないことを一生懸命やっているゴリラです。  

LINEスタンプはこちら↓
https://store.line.me/search/ja?q=%E3%82%B8%E3%83%A3%E3%83%B3%E3%82%B0%E3%83%AB%E3%82%AA%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%B3
JOラファエロ

久しぶりに記事書きました!
これからWebデザイナーを目指したい方やWebデザインを勉強してみたいと思っている方にオススメです!
https://www.jungleocean.com/design/170620webshosinsha

#Webデザイン #Webデザイナー

【保存版】Webデザイナーを目指すならチェックしておくべき書籍&サイト集

みなさん、こんにちは! ジャングルオーシャンのラファエロです! 「Webデザイナーになりたいけど、何から始めたらいいか分からない」「Webデザインの勉強したいけど、良い参考書が見つからない...

ジャングルオーシャン
JOラファエロ

ジャングルオーシャンのメンバーのミケランジェロがjQueryの記事を書いてくれました!
Webデザイン初心者必見ですよ~(^^)
https://www.jungleocean.com/programming/180618jquery-accordion

#Webデザイン #プログラミング

【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選!

どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介です。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってな...

ジャングルオーシャン
JOラファエロ

今週から僕らが運営しているWebメディア「ジャングルオーシャン」の更新を再開します!
初心者向けのクリエイティブ系、IT・Web系の情報を発信していきますので、興味のある方はぜひご覧ください(^^)

https://www.jungleocean.com

ジャングルオーシャン

ジャングルオーシャン
JOラファエロ

今週から僕らが運営しているWebメディア「ジャングルオーシャン」の更新を再開します!
初心者向けのクリエイティブ系、IT・Web系の情報を発信していきますので、興味のある方はぜひご覧ください(^^)

http://www.jungleocean.com

ジャングルオーシャン

ジャングルオーシャン
JOラファエロ

【メモ】男女ユーザーの違いによるWebサイト設計
男性はスペックや機能性を重視し、客観的な機能比較のうえ、他社よりも勝る優越感や所有欲を重視する傾向がある。一方で女性は、その商品やサービスを利用することで「自分自身が得られる幸福感」であったり、「そのモノに対する共感」を第一に考え、周囲の調和できるかなどの主観的・感情的な観点から情報収集や購買行動がなされる傾向にある。
Webサイトの設計を考える上では、こうした男女の考え方の違いも考慮しながら、それぞれのターゲットに最適な形で情報提供できるのが理想的。

#Webデザイン #Webマーケティング

JOラファエロ

【メモ】HTML5 <section>と<article>の違い
■section
・コンテンツの1章、2章、3章…と区切る部分で使う
・見出しタグと必ずセット
・sectionに内包された見出しタグはランクが1下がる=セクショニングコンテンツ(section、article、aside、nav)

■article
・それ自身で完結、ユーザーが理解できるコンテンツに使う
・sectionと同様、articleに内包された見出しタグはランクが1下がる
・見出しタグは必須ではない

#Webデザイン #HTML5

JOラファエロ

【メモ】CSS設計で活用したいツール
■メタ言語
・Sass(SCSS)
・LESS
・Stylus

■スタイルガイドジェネレーター
・StyleDocco
・KSS
・hologram
・FrontNote

■タスクランナー
・Gulp
・Grunt

■テンプレートエンジン
・iade
・EJS
・ECT

#Webデザイン #CSS #フロントエンドエンジニア

JOラファエロ

【メモ】Webライティングの意識すべきポイント
1.感情表現を入れ、自分事化による“共感”を誘発する
2.伝えたいことがきちんと伝わるよう、“見やすさ”や“わかりやすさ”にこだわる
3.ファーストビュー(冒頭文)で、伝えたいことをまとめる

#Webライティング #Webマーケティング

JOラファエロ

【メモ】選択のパラドックス
心理学者バリー・シュワルツが唱えた説で、選択肢が多いほど満足度が高まるものだが、選択肢が多すぎると選べなくなってしまい、満足度が高まらないというもの。

#Webマーケティング #心理学

JOラファエロ

【メモ】コピーライティングの代表テク
・誰もが知ってる言葉を文字る「本歌取り法」
・韻を踏む「ライミング法」
・○○より△△「比較法」

#コピーライティング #発想法

JOラファエロ

【メモ】レスポンシブデザインのサイトで動画をキービジュアルとして自動&ループ再生させるタグ
<video src=" image/動画ファイル.mp4" autoplay loop muted playsinline></video>

#Webデザイン #HTML5

JOラファエロ

【メモ】iphoneXのSafariでの表示を調整するviewport
viewport-fit=cover
viewport-fit=auto

●設定例
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=auto">

#Webデザイン #HTML

JOラファエロ

【メモ】Webデザインのコンセプト設計 チェック項目
①目的整理
・Webサイト(コンテンツ)の「目的」は何か?
・ターゲットに起こしてほしい「Action」は何か?

②ターゲット設定
・Webサイト(コンテンツ)のターゲットは誰か?
・ターゲットのニーズ/インサイトはどんなものか?
・ターゲットはどんなワードで検索しているか?

③課題整理
・今回のデザインで解決すべき課題は何か?

④FACT整理 自社について
・この商品/サービスの「強み」「メリット」は何か?
・この商品/サービスの「弱み」「デメリット」は何か?
・ターゲットがこのこの商品/サービスを選ぶ理由は?

⑤FACT整理 競合について
・競合商品/サービスの「強み」「メリット」は何か?
・競合商品/サービスの「弱み」「デメリット」は何か?
・ターゲットが競合商品/サービスを選ぶ理由は?

⑥FACT整理 市場について
・季節や時事的要因で、ターゲット行動に影響するものは?
・その他の市場動向で、ターゲット行動に影響するものは?

⑦ニーズ解決イメージ
・もっとも優先して伝えるべきメッセージ/情報はどれか?
・視覚的にターゲットにどんなイメージを与えたいか?
・デザインテイストの希望は?
・参考サイトなどあるか?どの部分を参考にしたいか?

⑧ニーズ解決イメージ 競合チェック
・競合は?どこを参考/差別化したいか?

#Webデザイン #コンセプト設計

JOラファエロ

【メモ】複数のボックスをflexboxで均等配置する方法
親要素 {
display: flex;
flex-flow: row wrap; /*flexbox内のボックスを自動改行*/
justify-content: space-between; /*ボックス間を均等に空ける*/
}

li {
flex: 0 0 (並べたい数と隙間を考慮した数値)%;
}

というようにするとliを均等配置したレイアウトが簡単に作れる!
しかし、ボックスの数のキリが悪いと空のタグで調整する必要がある。また、空のタグを増やした際には:empty疑似クラスで見栄えを調整することも検討する。

#Webデザイン #css #コツ

JOラファエロ

【メモ】flexboxを使った2カラムレイアウト
親要素{
display:flex;
}

子要素(サイドバー){
flex: 0 0 (固定したい幅)px;
}

子要素(メイン){
flex: 1 1 auto;
}

といったようにcssを指定するといい感じになる!
さらにorderプロパティを使うと左右の要素を簡単に入れ替えられる!

#Webデザイン #css #コツ

JOラファエロ

【メモ】修正に強いCSSを書くコツ(block要素の幅指定)
・widthはできる限り親要素のみに指定する
・親要素よりも狭いブロックを作るときは、左右マージンを検討する
・親要素よりも広いブロックを作るときは、左右にマイナスマージンを検討する
・ボックスを横並びにするときは、widthを「%」で指定する

#Webデザイン #CSS #コツ