PENGIN Inc.｜Web制作/SEO対策/マーケティング支援
@pengin_company
Followers
12,303
Following
557
Media
260
Statuses
9,156
Webサイト制作/SEO対策/オウンドメディア運用代行/CVR改善(CRO)/BtoBマーケティング伴走支援/コンテンツ企画制作🐧Webサイト・マーケティングのお困りごとを解決するWeb制作&マーケティング支援会社です🐧 無料相談▶
東京 渋谷区
Joined September 2019
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Vance
• 2396724 Tweets
Vance
• 2396724 Tweets
#VPDebate2024
• 332546 Tweets
Pence
• 136253 Tweets
Minnesota
• 134115 Tweets
Tampon Tim
• 96367 Tweets
Tiananmen Square
• 65895 Tweets
महात्मा गांधी
• 64225 Tweets
LINGLING MYCHERIE AMOUR EP4
• 62996 Tweets
からくりサーカス
• 61958 Tweets
गांधी जयंती
• 59758 Tweets
#原神KFCコラボ
• 57910 Tweets
लाल बहादुर शास्त्री
• 56557 Tweets
#GandhiJayanti
• 55539 Tweets
ケンタッキー
• 51354 Tweets
Obamacare
• 32481 Tweets
ニンテンドーミュージアム
• 28322 Tweets
リネット
• 26305 Tweets
Timmy
• 23926 Tweets
Vladimir
• 23703 Tweets
宮崎空港
• 17545 Tweets
ネットオーダー
• 17181 Tweets
原神コラボ
• 13907 Tweets
#LalBahadurShastri
• 11043 Tweets
おしゃれなボタンがコピペで作れちゃうサイト
他にもカードリストやチェックボックスなどたくさんあるのでおすすめ🐧
1
132
2K
【ちょっと宣伝】
コーディング練習用のデザインデータをブログでずーっと無料配布しています。
レイアウトの難易度別に用意していて、解説記事や解説動画もついています。
挑戦する方は、#クリスタチャレンジ のハッシュタグをつけてツイートしてもらえたら「いいね」しに行きますね💨
7
76
797
CSSで使用する単位まとめました
「俺はこの単位よく使うよ！」っていうコーダーさんやフロントエンジニアの方はリプに自分の意見を置いていってくれると、みんなが幸せになります😊
6
87
781
Webデザイナーを目指している人は、いわゆるクリエイティブなものを作りたいって思っている人が多いと思うけど、ごちゃごちゃの情報を整理してわかりやすくするって作業の方が圧倒的に多いということは知っておいた方がいいですね。
2
52
699
Googleマップをカスタマイズするのちゃんとやろうと思うとけっこう手間取るけど、cssのfilterプロパティでもお手軽に見た目の調整ができるよというお話。
実務で使うことはないかもしれないけど、勉強中の方はいろいろいじってみると良いかも💡
3
88
688
HTMLとCSSでよく使うemmetをまとめました😊
使ってるか使っていないかでかなりコーディングスピードに差がつくはず！！
まだ見てない方はチェックしてみてください👀
1
94
588
デザイナー歴30年の猛者に
「1週間でWebサイトのデザインからコーディングまでしなきゃいけない場合、まず何しますか？？」
って聞いたら
「丸2日いろんなWebサイト観まくる」
という回答が返ってきた。
準備を念入りにすることが、作業スピードを上げる！
2
43
572
Webデザイナーを目指している人は、いわゆるクリエイティブなものを作りたいって思っている人が多いと思うけど、ごちゃごちゃの情報を整理してわかりやすくするって作業の方が圧倒的に多いということは知っておいた方がいいですね。
1
44
537
尊敬する先輩デザイナーから「100回読んでください」というコメントとともにシェアされた記事＆動画です✨
レイアウト例が22パターンもあるので、100回読むの大変💨
みんなで100回読んで、日本のデザイナーのスキル底上げしましょう💪
1
54
482
デザインに取り掛かる前にイメージを言語化・視覚化すると手戻りが少なくておすすめです！！
具体的には、
①目的の確認
②イメージの言語化
③ムードボードでイメージの視覚化
④スタイルタイルでデザインのトンマナ決める
の順番でやると良いです！
#図解
#Web
デザイン
1
56
494
Webデザイナーを目指している人は、いわゆるクリエイティブなものを作りたいって思っている人が多いと思うけど、ごちゃごちゃの情報を整理してわかりやすくするって作業の方が圧倒的に多いということは知っておいた方がいいですね。
3
41
489
【HTML/CSSのセンタリング方法】
最初は意外と苦戦するであろう、上下左右方向のセンタリング方法についてまとめました。
自分でコードいじってみて、どのケースはどれを使うといいかあたりがつけられるとGOOD！！
1
36
462
【ポートフォリオに載せるべきこと〜制作実績編〜】
①制作物の写真（キャプチャやモックアップ）
②Webサイトの場合はURL
③使用ツール
④担当箇所
⑤制作期間
⑥デザインのポイント、根拠
⑦制作過程の説明（図解も交えて）
Webデザイナー転職ではポートフォリオで8割型決まると言われています！
0
31
438
Webデザイナーを目指している人は、いわゆるクリエイティブなものを作りたいって思っている人が多いと思うけど、ごちゃごちゃの情報を整理してわかりやすくするって作業の方が圧倒的に多いということは知っておいた方がいいですね。
3
35
438
「HTMLとCSSなんてかんたん」
って言ってる人は
だいたいコードぐちゃぐちゃです
14
24
435
PENGINのクリエイターが愛用しているFigmaプラグインを12個まとめてみた🐧
4
40
439
デザイナー歴30年の猛者に
「1週間でWebサイトのデザインからコーディングまでしなきゃいけない場合、まず何しますか？？」
って聞いたら
「丸2日いろんなWebサイト観まくる」
という回答が返ってきた。
準備を念入りにすることが、作業スピードを上げる！
1
28
406
ずっと「ハンバーガーメニュー jQuery」で検索1位だったんですけど、とうとう牙城を崩されました。
「動くWebデザインアイデア帳」さん、強すぎです。
めっちゃいいサイトなのでみんなも見てください。
0
40
390
コーディングの案件を受けるならHTMLの基本ルールは抑えよう！！
①section内には1つ以上のhタグが必要
②ul,olの直下はliのみ
③imgは用途によってhタグ、pタグ、liタグ、figureタグなどで囲む
④入れ子のルールに迷ったら吉川Webのチートシート！！
1
49
395
【CSSで使用する単位】
CSSで使用する単位をざっくりまとめました。
僕は、
px→サイズを固定したいときだけ使う。
rem→いっぱい使う。基本これでやる。
%、vh・vw→必要に応じて。
のような感じで使ってます。
0
46
392
【ポートフォリオに載せるべきこと〜自己PR編〜】
①自身の経歴を交えた自己紹介
②デザイン（の学習）に対する姿勢
③デザイナーとしてのあり方
④自身の基本情報、顔写真（とびっきりの笑顔で！）
Webデザイナー転職ではポートフォリオで8割型判断されるのでしっかりと対策しよう！
0
33
392
コーディングの案件を受けるならHTMLの基本ルールは抑えよう！！
①section内には1つ以上のhタグが必要
②ul,olの直下はliのみ
③imgは用途によってhタグ、pタグ、liタグ、figureタグなどで囲む
④入れ子のルールに迷ったらWeblikerのこの記事を見よう！！
0
40
386
【画像形式と用途の乱暴な説明】
jpg→四角い写真
png→四角くない写真
svg→アイコンやロゴ
gif→アニメーションできる
基本はこの4つがわかってれば大丈夫😊
0
23
359
HTMLタグは100種類以上あるので、一気に全てを使いこなせるようになるのは至難の業です💨
「まずはどのタグを理解すれば良いの？」という方に向けて、最初に覚えるべきHTMLをまとめて紹介しています！
#Web
デザイン勉強中 の方は参考にしてください😊
0
52
366
毎日テーマを決めてWebサイトを20個くらい見ると良いよ。
テーマはボタンの大きさでも、使用してるグレーの数でも、テキストサイズでも何でもいいよ。
これを続けているといつの間にか、それなりのクオリティのWebサイトを作れるようになるよ😊
0
27
350
コーディングの案件を受けるならHTMLの基本ルールは抑えよう！！
①section内には1つ以上のhタグが必要
②ul,olの直下はliのみ
③imgは用途によってhタグ、pタグ、liタグ、figureタグなどで囲む
④入れ子のルールに迷ったらWeblikerのこの記事を見よう！！
2
33
349
【HTML/CSSのセンタリング方法】
最初は意外と苦戦するであろう、上下左右方向のセンタリング方法についてまとめました。
自分でコードいじってみて、どのケースはどれを使うといいかあたりがつけられるとGOOD！！
#コーディング
1
25
355
【Webデザインの目安】
①本文のフォントサイズは14〜18px
②ヘッダーの高さは70~100px
③本文の文字色→
#000
は避ける
④line-height: 1.5〜2
⑤letter-spacing: .05〜.1em
⑥コンテンツ幅1000px前後
⑦セクション間の余白150〜200px
0
48
347
【宣伝・定期】
2019年からずーっと無料でコーディング練習用のXdデータを配布していま��。
レイアウトの難易度別に用意していて、解説記事や解説動画もあったりします。
スキルアップに使っていただければ幸いです😊
3
32
343
フォームのコーディング解説 第一回
【フォーム作成に使うHTMLタグ】
今日から4日間連続で、フォーム周りのHTML/CSSの解説をします😊
今日はフォーム作成時によく使用するHTMLタグについてです。
特にinputタグが重要、というか、初学者にとって厄介な存在のような気がします。
2
37
342
非表示にするCSS
✅display: none; →存在そのものを消す
✅visibility: hidden; →要素を非表示にする
✅opacity: 0; →透明にして見えなくする
✅z-index: -1; →他の要素の下に隠す
displayを使うと存在しなくなるので、レイアウトが変わります。z-indexはpositionがstatic以外のものに効きます。
0
30
336
先日、社内でFigma勉強会をしたのですが、素晴らしかったので自慢させてください🐧
■実施の背景
Director「デザイナーのデザインデータ、ちょっとした修正なら巻き取りたいけど、オートレイアウトやコンポーネントが多用されてて触れない...」
0
21
333
このシリーズは非常に良いです。
Webデザイナーの仕事について、学習方法について、ポートフォリオ制作のポイントなど情報盛りだくさんです。さすがLIGさん。
【LIGブログ】Webデザインを始めよう
0
28
301
知人「Webデザイナーって資格とかいるの？」
ぼく「いらない」
知人「え、じゃあWebデザイナーを名乗るにはどうすればいいの？」
ぼく「名刺にWebデザイナーって書くの」
おわり
2
27
302
Webデザインで気をつけるべきこと7選
✅ 本文のフォントサイズは14px〜18px
✅ ヘッダーの高さは70~100pxくらい
✅ 本文の文字色→
#000
は避ける
✅ line-height: 1.5〜2
✅ letter-spacing: 0.05em〜0.1em
✅ コンテンツ幅1000px前後
✅ セクション間の余白150px〜200px
0
32
295
デザイナー歴30年の猛者に
「1週間でWebサイトのデザインからコーディングまでしなきゃいけない場合、まず何しますか？？」
って聞いたら
「丸2日いろんなWebサイト観まくる」
という回答が返ってきた。
準備を念入りにすることが、作業スピードを上げる！
0
15
289
「とりあえずWebデザイナーとして就職できるレベル」を目指すなら、JavaScriptはjQueryの基本的な書き方がわかってて、if文がわかってればいいです。
フロントエンドになりたいならjsの世界にハマりましょう。
0
15
286
【Webデザイナーが知っておきたいマーケティング用語】
CTR=クリック率
CPC=クリック単価
CPA=顧客獲得単価
CVR=コンバージョン率
CPA=CPC÷CVR
ROAS=広告費用対効果=売上額÷広告費
0
26
277
⚠Webサイトに英語を使用するときの注意点
HTMLに大文字のみで英単語を記述すると正しく読み上げられない場合があります。
「そもそも文字情報として英語表記が適切なのか？」という部分も検討の余地ありですね😊
▼参考
1
34
279
なんか図解ツイートがすごい伸びてる感じするので、調子にのってまた作りました👀
CSSのfilterプロパティを使うとiframeで埋め込んだGoogleマップの見た目をお手軽にカスタマイズできるよって話💬
1
37
275
尊敬する先輩デザイナーから「100回読んでください」というコメントとともにシェアされた記事＆動画です✨
レイアウト例が22パターンもあるので、100回読むの大変💨
みんなで100回読んで、日本のデザイナーのスキル底上げしましょう💪
0
29
278
デザイナー歴30年の猛者に
「1週間でWebサイトのデザインからコーディングまでしなきゃいけない場合、まず何しますか？？」
って聞いたら
「丸2日いろんなWebサイト観まくる」
という回答が返ってきた。
準備を念入りにすることが、作業スピードを上げる！
0
14
271
とりあえずjQueryの書き方はこれだけ覚えればOK
あとは使いながら慣れていこう
1
34
274
ちょっといいこと教えてあげる
Google画像検索で「style tiles」と検索するのだ！
スタイルタイルって日本ではあんまり見かけないけど、スタイリングのルールを1枚にまとめたもの🐧
いろんなテイストのデザインのルールが1枚でパッと確認できるので、引き出しを増やすのに非常に便利です😊
0
25
271
未経験からWebデザイナーになってる人は
結局
「Webデザイナーになるためならなんでもやりまっせ」
という姿勢を持った人がほとんど。
独学でもスクールでも関係なく、これが全てなんじゃないかと思います。
0
18
257
【コーディングスピードが倍速になる方法】
Lv.1 emmetを使いこなそう
Lv.2 よく使うコードはスニペット化しよう
Lv.3 コーディングに入る前にデザインカンプを観察、共通の要素を書き出そう
Lv.4 HTMLを書ききってからCSSを書こう（HTMLに戻らない！）
#Web
デザイン #コーディング
0
22
261
デザイン勉強中のときに、イラレ のペンツールが全然使いこなせなくて、デザイナーさんに相談したんですよ。
そしたら「fontawesomeのアイコン全部トレースしたら？」って言われたのね。
要は、「できないとか言う前に量をこなせよ」ってことね。
これはマジ何事もそう。
0
15
257
非表示にするCSS
✅display: none; →存在そのものを消す
✅visibility: hidden; →要素を非表示にする
✅opacity: 0; →透明にして見えなくする
✅z-index: -1; →他の要素の下に隠す
displayを使うと存在しなくなるので、レイアウトが変わります。z-indexはpositionがstatic以外のものに効きます。
0
18
259
毎日テーマを決めてWebサイトを20個くらい見ると良いよ。
テーマはボタンの大きさでも、使用してるグレーの数でも、テキストサイズでも何でもいいよ。
これを続けているといつの間にか、それなりのクオリティのWebサイトを作れるようになるよ😊
1
13
253
デザインに取り掛かる前にイメージを言語化・視覚化すると手戻りが少なくておすすめ。
具体的には、
①目的の確認
②イメージの言語化
③ムードボードでイメージの視覚化
④スタイルタイルでデザインのトンマナ決める
の順番でやるとよき。
2
30
256
コーディング勉強してる人へ
Bootstrap→別に勉強しなくても良い。実務ではあんまり使わない。
Sass→割と必須。でもCSSをちゃんと理解してないと勉強してもあんまり意味ない気がする。
HTML,CSS,jsの基礎をまずはしっかり理解しよ？
目安はいつも言ってますが、5〜10サイト自力で作ったら大丈夫🙆♂️
2
17
248
コーディングの案件を受けるならHTMLの基本ルールは抑えよう！！
①section内には1つ以上のhタグが必要
②ul,olの直下はliのみ
③imgは用途によってhタグ、pタグ、liタグ、figureタグなどで囲む
④入れ子のルールに迷ったらWeblikerのこの記事を見よう！！
0
25
249
Webデザインやプログラミング学習中で、他人と比較して自信を失っている方をよく見かけます。
そんな人には必ず言うのですが、
比較するのは「過去の自分」だけで良いです。
学習の進み具合は人によって異なりますが、日々努力を継続できれば目標とするレベルには必ず到達できます。
2
18
249
Webデザイン���気をつけるべきこと7選
✅ 本文のフォントサイズは14px〜18px
✅ ヘッダーの高さは70~100pxくらい
✅ 本文の文字色→
#000
は避ける
✅ line-height: 1.5〜2
✅ letter-spacing: 0.05em〜0.1em
✅ コンテンツ幅1000px前後
✅ セクション間の余白150px〜200px
0
26
247
【バナー作成時のポイント】
バナー作成時に意識しているポイントをまとめました😊
✅強弱をはっきりと
✅被写体の顔・視線を利用する
✅視線の動きを意識する
1
14
242
【Webデザイナー必見】
Figmaのプラグインで「HTML To Figma」って知ってます？👀
参考サイトのデザイントレースをしたい時ってありますよね？
このプラグイン入れたら、
「URL貼り付ける」
これだけでFigmaに要素がトレースされちゃいます😌
便利なので使ってみて🐧
0
33
247
コーディング勉強してる人に聞いてほしい。
Bootstrap→別に勉強しなくても良い。あんま使わない。
Sass→勉強した方が良いけど、まずはCSSちゃんと理解しよ？
HTML,CSS,jsの基礎をまずはしっかり理解しよ？
目安はいつも言ってますが、5〜10サイト自力で作ったら大丈夫🙆♂️
0
13
232
【ポートフォリオに載せるべきこと〜自己PR編〜】
①自身の経歴を交えた自己紹介
②デザイン（の学習）に対する姿勢
③デザイナーとしてのあり方
④自身の基本情報、顔写真（とびっきりの笑顔で！）
Webデザイナー転職ではポートフォリオで8割型判断されるのでしっかりと対策しよう！
1
13
226
【デザイン上達のために絶対にやるべきこと】
「デザインをたくさん見ること」
①国内系のギャラリーサイトは毎日見よう
②pinterestも毎日見よう
③街にあふれる広告や看板のデザインもしっかり見よう
④時間があるときはトレースしよう
⑤時間がないときはデザインの目的を考えて言語化しよう
1
17
228
使いやすいサイトにするために、imgタグに指定しておくといいやつ😊
0
21
215
【Webデザインの目安】
①本文のフォントサイズは14〜18px
②ヘッダーの高さは70~100px
③本文の文字色→
#000
は避ける
④line-height: 1.5〜2
⑤letter-spacing: .05〜.1em
⑥コンテンツ幅1000px前後
⑦セクション間の余白150〜200px
0
24
215
急募です、、
デザイナーとコーダー募集！
弊社パートナーにてデザイナーとコーダーを募集しております！
■条件
・勤務地：品川
・雇用形態：正社員（業務委託も検討可）
・経験浅くてもOK
ポートフォリオをDM頂けますと幸いです！🙇♂️
5
17
199
最初は以外と難しく感じるであろう上下左右方向のセンタリング
いろんなパターンがるので、状況に応じて使い分けよう😊
0
17
214
コーディング勉強してる人に聞いてほしい。
Bootstrap→別に勉強しなくても良い。あんま使わない。
Sass→勉強した方が良いけど、まずはCSSちゃんと理解しよ？
HTML,CSS,jsの基礎をまずはしっかり理解しよ？
目安はいつも言ってますが、5〜10サイト自力で作ったら大丈夫🙆♂️
0
9
211
フォームのリセットによく使うCSS
①クリックしたときの枠線をなくす
→outline: none
②各要素のデフォルトの装飾をなくす
→appearance: none;
③テキストエリアの伸縮をできなくする
→resize: none;
この辺はフォームをコーディングするときによく使うのでチェックしておいてね✨
0
12
208
スキル半端ないデザイナーに「コーディングどうやって覚えたの？」って聞くと「コーディングできないのにWebの案件受けて、炎上させながら覚えた」って人、かなり多い印象ある。
参考にはしないでください。
0
11
198
Webデザイン初学者の方はサイトに動きをつけたがるけどちょっと待って！！
「アニメーションがなくても成り立つデザイン」と「ローディングアニメーションがなくてもユーザーを待たせない表示速度」を実現することが先決だからね！！
動かないとダサい・動かないとストレスなサイトを作るなんて最悪！
1
15
205
【よくあるセクションの構造】
セクションはこんな感じでコーディングするとレスポンシブ対応が楽だよというお話。
0
17
202
コピーを考えたり、シェイプを複数分割したりするのがちょっと面倒…
そんなクリエイターのちょっとめんどくさいをなくしてくれるプラグイン提供サイト「NERY」をご紹介💡
・Figma、Chromeで使えるプラグイン
・シンプル＆簡単で使いやすい
・サイトがかわいい！ワクワクする！
1
15
205
コーディング学習中の方へ
emmetを使っていますか？？
emmetを使用するとコーディングスピードがめちゃくちゃ早くなります💨
かつ、打ち間違いも減らせるので、学習中から少しずつ慣れていいくと良い😊
VSコードのemmetについてまとめています🌟
1
20
194
コーディング初心者に伝えたいこと
✅positionは最後の手段
✅何でもdivで囲まない
✅heightは基本使用しない
力技でコーディングしちゃうと、のちのちめっちゃ大変だから
5
14
195
【ポートフォリオに載せるべきこと〜自己PR編〜】
①自身の経歴を交えた自己紹介
②デザイン（の学習）に対する姿勢
③デザイナーとしてのあり方
④自身の基本情報、顔写真（とびっきりの笑顔で！）
Webデザイナー転職ではポートフォリオで8割型判断されるのでしっかりと対策しよう！
0
12
186
【互い違いのレイアウトの組み方】
こんな感じの互い違いのレイアウトを組むときは、flex-directionを使おうねというお話。
これはほとんどの初学者が100%躓くポイントだと思ってます！！
#コーディング
1
22
184
【コーディングスピードが倍速になる方法】
Lv.1 emmetを使いこなそう
Lv.2 よく使うコードはスニペット化しよう
Lv.3 コーディングに入る前にデザインカンプを観察、共通の要素を書き出そう
Lv.4 HTMLを書ききってからCSSを書こう（HTMLに戻らない！）
#Web
デザイン #コーディング
1
14
189
webデザイナー向けChrome拡張機能
✅css peeper
→開いているサイトで使われているフォント、配色、画像など調べられる
✅what runs
→サイトで使用されているCMSなどがわかる
✅GetTabInfo
→開いているタブ全てのリンクをコピーできる
✅whatfont
→カーソルを当てるとフォントの種類がわかる
0
15
188
【Webデザイナー必見】
Figmaのプラグインで「HTML To Figma」って知ってます？👀
参考サイトのデザイントレースをしたい時ってありますよね？
このプラグイン入れたら、
「URL貼り付ける」
これだけでFigmaに要素がトレースされちゃいます😌
便利なので使ってみて🐧
0
23
185
Webデザインの余白について解説🐧
有名なのだと「8の倍数」で設定するテクニック💡
これは一般的なスクリーンの解像度に8の倍数が使われてることが多く、それらに合わせやすいから、なんてのもあります💻
余白を意識するだけでデザインはガラッと変わりますよ！👀
0
16
184
コーディング覚えたての人が苦戦するレスポンシブコーディング。
レスポンシブは検証ツールの使い方を理解すれば全然怖くないです。
基本は２つ！！
①幅がはみ出てるやつはwidth: 100%; とかにして収める
②横並びになってるやつを縦に並べる
落ち着いて、冷静にやればできるよ！
1
7
179
Webデザインやプログラミング学習中で、他人と比較して自信を失っている方をよく見かけます。
そんな人には必ず言うのですが、
比較するのは「過去の自分」だけで良いです。
学習の進み具合は人によって異なりますが、日々努力を継続できれば目標とするレベルには必ず到達できます。
0
25
181
【高級感の出し方】
■落ち着いたトーンの配色
■細いフォント・細いあしらい
■たっぷりめの余白
■小さめのジャンプ率
0
17
185
【Webデザインの目安】
①本文のフォントサイズは14〜18px
②ヘッダーの高さは70~100px
③本文の文字色→
#000
は避ける
④line-height: 1.5〜2
⑤letter-spacing: .05〜.1em
⑥コンテンツ幅1000px前後
⑦セクション間の余白150〜200px
0
22
177
「とりあえずWebデザイナーとして就職できるレベル」を目指すなら、JavaScriptはjQueryの基本的な書き方がわかってて、if文がわかってればいいです。
フロントエンドになりたいならjsの世界にハマりましょう。
2
14
173
Webデザインやプログラミング学習中で、他人と比較して自信を失っている方をよく見かけます。
そんな人には必ず言うのですが、
比較するのは「過去の自分」だけで良いです。
学習の進み具合は人によって異なりますが、日々努力を継続できれば目標とするレベルには必ず到達できます。
0
17
174
HTML5でdlタグの直下にdt,ddだけじゃなくてdivタグもOKになったおかげで、dtとddを横並びにしやすくなったの嬉しいですよね！
0
8
177
未経験からWebデザイナーになってる人は
結局
「Webデザイナーになるためならなんでもやりまっせ」
という姿勢を持った人がほとんど。
独学でもスクールでも関係なく、これが全てなんじゃないかと思います。
3
8
169
【ボックスモデル】
コーディングを学ぶ際に抑えておきたい基礎知識を図にしました。
◾ボックスモデルの概要
◾marginとpaddingの使い分け
◾marginの相殺
このあたりを理解できると捗るはず。
0
21
173
Webデザイナーを目指している人は、いわゆるクリエイティブなものを作りたいって思っている人が多いと思うけど、ごちゃごちゃの情報を��理してわかりやすくするって作業の方が圧倒的に多いということは知っておいた方がいいですね。
0
6
168
初めてWebサイトを作るみんな〜😊
画像は2倍サイズで書き出して（Retina対応）、圧縮して（軽量化）使用しようね〜😊
画像ファイル名を日本語でつけちゃう悪い子は「めっ！！」だからね〜😊
0
6
165
毎日テーマを決めてWebサイトを20個くらい見ると良いよ。
テーマはボタンの大きさでも、使用してるグレーの数でも、テキストサイズでも何でもいいよ。
これを続けているといつの間にか、それなりのクオリティのWebサイトを作れるようになるよ😊
0
6
164
毎日テーマを決めてWebサイトを20個くらい見ると良いよ。
テーマはボタンの大きさでも、使用してるグレーの数でも、テキストサイズでも何でもいいよ。
これを続けているといつの間にか、それなりのクオリティのWebサイトを作れるようになるよ😊
0
14
157
\ 知らなきゃ損!! /
手戻りしにくいデザインの制作フロー
はるか昔に「おしゃれな案件とろうぜ！！」って勢いでつくったものの、結局必要なくなったデザインが出てきたのでここに供養します。
かなり簡素ではありますが、こんな流れでやると手戻りや認識の齟齬が起きづらいのでおすすめ😊
0
16
164
再投稿！
【初心者がWebデザインするときに気をつけるべきこと】
①本文のフォントサイズは14〜18px
②ヘッダーの高さは70~100px
③本文の文字色→
#000
は避ける
④line-height: 1.5〜2
⑤letter-spacing: .05〜.1em
⑥コンテンツ幅1000px前後
⑦セクション間の余白150〜200px
0
32
160
【コーディングスピードが倍速になる方法】
Lv.1 emmetを使いこなそう
Lv.2 よく使うコードはスニペット化しよう
Lv.3 コーディングに入る前にデザインカンプを観察、共通の要素を書き出そう
Lv.4 HTMLを書ききってからCSSを書こう（HTMLに戻らない！）
#Web
デザイン #コーディング
0
6
156
imgの下にできちゃう微妙な隙間に困っている方がいたら聞いてください。
img要素に対して、vertical-align:bottom; を指定するのです。
そうすれば、その気持ち悪い隙間はなくなります。
（bottomじゃなくても良いですが、僕はbottomを使ってます）
0
14
157
【LIGブログ】Photoshop初心者がフォトショ上達するための基本的な使い方まとめ
LIGさんのPhotoshopのチュートリアルのまとめです！
一通りやれば、初級〜中級レベルにステップアップできます。
#Web
デザイン
#Photoshop
0
14
158
【疑似要素before、afterを使うときのポイント】
①content:"" ←空っぽでも書く。""内に文字入れたら反映される。
②display ←初期値はinlineなので、高さを出したいときはblockにする。
③contentが空っぽは場合は、widthやheightの指定も忘れずに★
0
14
158
Webデザイナーに限らず、大人はメンタルを安定させておいた方がいいですよね。
これは割とガチのマジな話なんですけど、
植物性タンパク質をたくさんとって、週3日くらい筋トレしとけば、だいぶ安定しますよ。
1
3
155