こばやす🍟現場のWebデザイナー @kobayas_s Twitter profile | Pikagi

Pikagi

こばやす🍟現場のWebデザイナー

@kobayas_s

21,121

Followers

155

Following

249

Media

5,554

Statuses

制作現場のリアルを発信｜ IT企業インハウス8年｜会社員と個人事業のパラレルワーカー｜#バナーお題 #Web デザインお題発案者｜学習教材や現場の考えブログ｜素材サイト運営 @SketchStock ｜お問合せ

Amazonアソシエイトプログラムに参加中

https://t.co/4vLRvinWFt

Joined September 2018

Don't wanna be here? Send us removal request.

Pinned Tweet

@kobayas_s

こばやす🍟現場のWebデザイナー

25 days

【ゆる募】とある企画で「バナーデザイン」について調査しています。バナー制作をする時、どういう事に悩んでいるかプロ初心者問わずご意見相談が欲しいです！匿名で投稿できます。ご協力頂ける方はリプ欄のリンクからお願いします。需要がある内容は企画題材に採用または解決方法をポストします→

1

8

46

Last Seen Profiles

@slivansarraf

@scat_tantei2

@Gene5AK

@ConkerLover

@KadriSimson

@toddthefox

@VimalElaichi

@sheffieldtrib

@edgeonline

@scrawnya

@GVsftball

@baebaeznx

@Lucasyecla99

@Talaxkd

@WINTM2

@23lftv

@JonathanScott

@DeeSWhite1

@GVAbforestals

@lfmtalent

@OhioStFootball

@785_ssb

@kumanesque

@wendy321rs

@Astro_Aure

@FGulencomEN

@bulcamdusunuom

@nagahama_whisky

@StDavidsCollege

@FantaVicki

@tokyominato23_2

@shamzzyba

@spj_tweets

@wendy321rs

@manuelmorales_g

@spiritofshankly

@kobayas_s

こばやす🍟現場のWebデザイナー

24 days

デザイン制作者から貰う見積書、期限を設けなていないのをよく見かけるんだけど「あの見積もりどうなったかな…」と気に病むのでは？備考に「この見積は〇日までの料金です。期限以降は再見積もり、改めてスケジュールを組ませていただきます」って入れておくと返信率が高まった事例を呟いておく。

3

756

3K

@kobayas_s

こばやす🍟現場のWebデザイナー

7 months

私が育てた後輩の中には「自宅にAdobeが入ってません」って人もいて、業務時間にしかツールに触れたりデザインについて考えないから、プライベートでデザインしたりツールで遊んでる人に比べたら必然的に遅れていく。…

10

525

2K

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

支給された写真が微妙だった場合の対処法 ❶何が微妙なのかリストアップし、NGレイアウトを確認 ❷不足を補い、素材を活かすレイアウトパターンを考える ❸写真を適度に美容整形してデザインに反映原型がなくなるまで加工が必要な場合や、そもそも素材として機能しない場合は相談するようにしてます。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

4

330

2K

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

「Twitterの画像Tipsはどうやって作ってる？」という質問を頂いたのでまとめました。私はWebデザイン系のTipsが多いので、Adobe XDを使用して、サンプルデザインと共に作成します。（グラフィック系はイラレ）個人的に便利な機能紹介、どうやって情報整理しているかも記載したのでご参考までに。

Tweet media one

Tweet media two

Tweet media three

2

237

2K

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

シンプルなデザインにしたい時、白無地だけだと寂しいレイアウトになってしまう。同じ白系でも質感や光と影のある背景を使うとリッチなデザインに早変わりするよ。さり気無い背景でもそれぞれ雰囲気を持たせる事が出来るので、伝えたい情報に合わせて組み合わせてみてね。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

275

2K

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

本当は教えたくないけど我慢出来ないので紹介！ Webサイトって情報量が多いからいつもデザインに頭悩ませてる。この本は実際運用したサイトの検証結果を元に改善したデザインを解説してるので超参考になる。具体的な改善根拠と実証後の結果数値も載ってるから信頼度高いね！

Tweet media one

Tweet media two

Tweet media three

Tweet media four

4

188

2K

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

Webディレクターってデザイナーの負担を軽減する役割がある。そしてユーザー目線になり、クライアントが言う要望の真意を聞いてくれるディレクターはデキるなと思う。デザイナーへは「クライアントの要望＋根拠」を伝えて貰えるとその後の作業がスムーズになりやすい。

Tweet media one

Tweet media two

Tweet media three

4

238

2K

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

Web制作見てるとやたら英語表記多くない…？「何故英語にしたの？」と聞くと「カッコいいから」との返答が多いので、意図を持って使って欲しいのでTipsにまとめました。私は日本人なので、グロナビとか英語表記されるとクリックしたくなくなるから一工夫してくれてるサイトは親切だなと思います。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

4

166

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

3 months

本当は教えたくない、ボロボロになるまで読んだ本の紹介。 Webサイト制作って情報量が多いからいつもデザインに頭を悩ませている。この本は実際運用したサイトの検証結果を元に改善したデザインを解説してるので超参考になる。具体的な改善根拠と実証後の結果数値も載ってるから信頼度も高い➡

Tweet media one

Tweet media two

Tweet media three

3

125

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

9 months

会社に5人に1人は「貢献に前のめり」人材が来るけど長続きせず辞めてしまうのをよく見た。私もこのタイプで、業務改善に燃え「皆が気持ちよく仕事するため」と奮闘した時があるけど、一人で頑張っていると空回りばかりで「こんな頑張ってるのに何故皆ついてきてくれないの?」と勝手に疲弊していた⇀

5

184

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

制作が速い子に聞いた、PC版Webサイトからレスポンシブデザインを起こす方法 ❶PCデザインを半分隠す ❷隠した所を寄せるようにリサイズしながらレスポンシブサイトのデザインを考えるスマホサイズ→PCデザインにすると上手く余白を調整し難い時もあるから、こういう方法で制作したら解消されやすい。

Tweet media one

2

147

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

1 month

シンプルなデザインにしたい時、白無地だけだと寂しいレイアウトになってしまう。同じ白系でも質感や光と影のある背景を使うと奥行きが出たり、リッチなデザインに早変わりするよ。さり気無い背景でもそれぞれ雰囲気を持たせる事が出来るので、伝えたい情報に合わせて組み合わせてみてね。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

108

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

9 months

プライベートではデザイナーだという事を隠すようにしている。知られてしまうとボランティアでデザインさせられそうになったり、デザインを教えてくれと言われるから。「好きでやってるんだから良いでしょ」みたいに頼んでくるのはとても失礼だと思うんだけど、そういう人は大抵悪気がない。

4

129

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

バナーの写真素材選びに迷いがちな人へ作る前から探すと自由度が高すぎて迷子になるので、制限を加えた状態でやると解消するかもな一例。 ❶必要な情報を全て入れ、レイアウトを数パターン用意 ❷作ったパターンのどの部分に写真配置できるか想像 ❸レイアウトに写真を配置して最終調整

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

138

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

フォントの組み合わせを学ぶ方法 ❶既存デザインを分類し特徴を観察する ❷「何故」を言語化して分析 ❸真似てから調整をする ❹自分の考えを反映初学者はデザインの引き出しが足りないので、既存デザインから法則性を学び、理解レベルに応じて自分の考えをデザインに落とし込むと上達しやすいよ。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

131

1K

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

写真を切り抜きして配置したけど、取ってつけたようなデザインになってしまう。そんな時は ❶数ある加工方法の中で何故切り抜きを選んだのか ❷どんな効果を予想して切り抜きをするのか ❸ユーザーにどんな印象を与えたくて切り抜くのかこれらを考えてから作ってみると、デザインに深みが出るよ。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

85

978

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

【Webディレクターがチームへの伝達で役に立つ参考サイト】こんな感じでやってもらいたいんだけど出来るのかな…と頭では明確に描いている仕様はあるけど、実際指示する時に困る。ちょっとした指示をテキストだけでやるにはキツイ。そんな時に役立つサービス4選集めたよ。リンクはリプ欄に⇀

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

110

962

@kobayas_s

こばやす🍟現場のWebデザイナー

11 months

ちょっと変わったイラストが欲しい方へのお勧め素材サイト 🍟VintageVillage ヴィンテージ&レトロ系の雰囲気出すのに使える 🍟OKUMONO Vtuber配信で良く使われるポップ&サイバー多め 🍟農民イラスト畑の作業図解に使える 🍟ハンコでアソブ手書きっぽさが可愛い。リンクはリプ➡

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

137

956

@kobayas_s

こばやす🍟現場のWebデザイナー

3 months

Webディレクターが伝書鳩にならないために出来る事。ディレクターはデザイナーの負担を軽減する役割がある。ユーザー目線になり、クライアントが言う要望の「真意」を汲み取れる人はデキるなと思う。…

Tweet media one

Tweet media two

Tweet media three

0

158

927

@kobayas_s

こばやす🍟現場のWebデザイナー

3 months

コードが書けないWebディレクターにお勧めしたい「動くWebデザインアイディア帳」サイト。どのようなモーションを付けるかコーダーへ細かく指定したいけど口頭で説明するのが難しい時、これを見せればコミュニケーションが取りやすくなる。サンプルコードも載っているので勉強にも使えるよ！ただ➡

Tweet media one

1

94

916

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

#できるかもデザインで文字を黒色にしていますが、印刷物の場合K100だけだと、下に敷いた写真などがあると透過してしまいます。 K100プラスでCMYを20％ずつ足すと透過が無い真っ黒を表現（リッチブラック）出来るので、意識してみて下さい。新人の頃、私はそれ知らなくて火傷を負いました…

Tweet media one

6

92

836

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

デザイン制作中にちゃぶ台返しが起きたり、修正が長引く原因4選。特に良くあるのはクライアント「ここまでやってくれると思った」制作者「分かってると思っていた」の認識ズレが起こる事が多いので、なるべく始めの段階で共有を綿密にしておきましょ。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

122

813

@kobayas_s

こばやす🍟現場のWebデザイナー

1 year

Webデザイナーの採用担当をしていた時ポートフォリオを何十件と見てきたけど、魅力的だと思ったのは全体の1割程度。でも惜しい人は沢山いたので、どんなポートフォリオだとウケが良いか採用担当目線で書きました。その他大勢から脱出したい人は参考にしてみてください。

Tweet card media

Webデザイナーの採用担当をして好印象だった未経験応募者のポートフォリオ｜こばやす｜Webデザイナー

こんにちは、こばやす(@kobayas_s)です。以前「デザイナーの採用担当した私が良いと思ったポートフォリオ」というテーマで採用担当者目線で記事を書いたところ多くの反響を頂きました。また実際に採用担当をされている方からも多く助言を頂く事があったので、もう少し深堀りした記事を書こう��思いました。以上の記事は「基礎はOK」レベルの内容です。この記事では前回書いた内容に触れつつも、採用担当者...

0

101

770

@kobayas_s

こばやす🍟現場のWebデザイナー

3 months

Webデザイナーの採用担当をしていた時ポートフォリオを何十件と見てきたけど、魅力的だと思ったのは全体の1割程度。でも惜しい人は沢山いたので、どんなポートフォリオだとウケるか採用担当目線で書きました。その他大勢から脱出したい人は参考にしてみてください。

Tweet card media

Webデザイナーの採用担当をして好印象だった未経験応募者のポートフォリオ｜こばやす｜Webデザイナー

こんにちは、こばやす(@kobayas_s)です。以前「デザイナーの採用担当した私が良いと思ったポートフォリオ」というテーマで採用担当者目線で記事を書いたところ多くの反響を頂きました。また実際に採用担当をされている方からも多く助言を頂く事があったので、もう少し深堀りした記事を書こうと思いました。以上の記事は「基礎はOK」レベルの内容です。この記事では前回書いた内容に触れつつも、採用担当者...

1

85

760

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

「3色だけでセンスのいい色」目次にカラーサンプルが載ってて探しやすい色見本帳。 3色をどの量で使ってどんな雰囲気になるかが図解で分かりやすい。3パターンもあるから組み合わせの引き出し増えるね！ CMYK、RGBの数値も記載されててWeb &紙デザイン両方使える！

Tweet media one

Tweet media two

Tweet media three

3

113

739

@kobayas_s

こばやす🍟現場のWebデザイナー

1 year

翔泳社様 @shoeisha からご本を頂き拝読しました！「何故このデザインにしたのか」を分かりやすくどう伝えるか悩��ベテランデザイナーや、何となくデザインしてしまう初学者に見て貰いたい本。…

Tweet media one

Tweet media two

Tweet media three

3

70

738

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

ポートフォリオの具体的な作り方や、デザイナーの採用担当して時に感じた話はこちらを見てくださいな。 ❶デザイナーの採用担当した私が良いと思ったポートフォリオ ❷Webデザイナーの採用担当をして好印象だった未経験応募者のポートフォリオ

Tweet card media

デザイナーの採用担当した私が良いと思ったポートフォリオ｜こばやす｜Webデザイナー

はじめまして、Webデザイナー、ディレクターのこばやす(@kobayas_s)と言います。普段はtwitterが主な活動場所ですが、そこで以前こんなツイートをしました。これが思いの他反響があり、深く掘り下げてみようと思いました。新卒でデザイナーになろうと思っている方や転職活動をしている方に役立てて貰えたら嬉しいです。私はWebデザイナーなので、ネットの業界に関するポートフォリオの作...

0

82

711

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

Webデザイナーの採用担当をしていた時「惜しい」と感じるポートフォリオが沢山あったので、当時の気持ちや入れて欲しい情報について #note にしました。これから応募に向けて準備をしている人は一読して頂けるとみる目線がまた変わるかも知れません。

Tweet card media

デザイナーの採用担当した私が良いと思ったポートフォリオ｜こばやす｜Webデザイナー

はじめまして、Webデザイナー、ディレクターのこばやす(@kobayas_s)と言います。普段はtwitterが主な活動場所ですが、そこで以前こんなツイートをしました。これが思いの他反響があり、深く掘り下げてみようと思いました。新卒でデザイナーになろうと思っている方や転職活動をしている方に役立てて貰えたら嬉しいです。私はWebデザイナーなので、ネットの業界に関するポートフォリオの作...

1

78

695

@kobayas_s

こばやす🍟現場のWebデザイナー

7 months

Webディレクターしてた時、フリーランスの方から色んな請求書を受け取って混ぜこぜになりやすいから「送付日_作業内容_作業者の名前または屋号」のpdf名で送ってくれるのめっちゃ助かった。

4

60

691

@kobayas_s

こばやす🍟現場のWebデザイナー

1 month

現場ではデザインをクライアントへ説明する機会がよくあるんだけど、上手く言語化出来なくて悩む時がある。この本はデザインの細かい作りまで「なぜ」の説明があって、文字や写真、色など各視点にもフォーカスしているので語彙力を鍛えたいなら参考になる。駆け出しデザイナーもクライアントの要望➡️

Tweet media one

1

42

619

@kobayas_s

こばやす🍟現場のWebデザイナー

3 months

ディレクターを介しながらデザイン仕事をしていたんだけど、修正や追加要件が何度も繰り返され、最終的に「クライアントと直接やり取りして貰って良いですか？そっちの方が早いと思う」ってディレクターから丸投��されるのはデザイナーあるあるとは言いたく無いけど、実際ある話である。

2

79

609

@kobayas_s

こばやす🍟現場のWebデザイナー

5 years

制作が速い子に聞いた、PCサイトデザインからレスポンシブを起こす方法 ①PCデザインをする ②①のデザインを半分隠す ③隠した所を寄せるようにリサイズしながらレスポンシブサイトのデザインをするスマホサイズ→PCデザインにすると物足りない感じになる時あるから、こういう方法もアリだな🤔

Tweet media one

1

99

589

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

画像に影を付ける時、初学者がよくやってしまいがちな加工の改善方法まとめ。 ❶画像自体にドロップシャドウで全体がぼんやり ⇀光の当たり方を考えて影の土台を作り、土台にドロップシャドウをかける ❷影の色が浮いている ⇀下地の色を取って影を作るほんのひと手間、結構重要。

Tweet media one

Tweet media two

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

写真を切り抜きして配置したけど、取ってつけたようなデザインになってしまう。そんな時は ❶数ある加工方法の中で何故切り抜きを選んだのか ❷どんな効果を予想して切り抜きをするのか ❸ユーザーにどんな印象を与えたくて切り抜くのかこれらを考えてから作ってみると、デザインに深みが出るよ。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

85

978

1

40

588

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

クライアント様お急ぎの所大変恐縮ですが、修正は1度にまとめてご依頼頂けると大変助かります。デザイナーへの伝達が1度で済み、作業に全精力を注げるため迅速に最新データの納品が出来ます。更に再確認のお手間も減りますので、何卒ご協力の程お願い致します。という返しで使っていいヨ。

Tweet media one

4

124

579

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

ここ数年で雇用形態を色々変えてるんだけど私的に「パート＋副業」がメンタル的に楽だと気付いた。パートで最低限の生活費を確保しつつ副業で自分の好きな事やる感じ。 Webデザイナーはスキル有ればパートでも交渉次第で時給高くなる。休みやすいし時間的融通も効くから忙しさによって調整出来る。

7

43

576

@kobayas_s

こばやす🍟現場のWebデザイナー

1 year

私事ですが、無事第一子を出産しました！新人研修並に新しく覚える事も多く毎日を送るのに必死ですが、新たな発見や知識が増え自分のアップデートが捗っています。ママさんデザイナーとして、気持ちを新たに発信していけたらなと思っておりますので、今後ともよろしくお願いします！

Tweet media one

24

4

578

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

私の周りにいるデザイナーとデザインを知らない人の話を聞くと、前者は理論を語り後者は感情を語る事が多い印象。プロのデザイナーに添削して貰うと違和感を言語化して貰えて分かりやすいけど、サイト見る人はノンデザイナーも多いからこの人達の意見も汲み取れると更に改善が深まるなと感じた。続→

Tweet media one

Tweet media two

1

59

566

@kobayas_s

こばやす🍟現場のWebデザイナー

9 months

でも「自分が仕事しやすくするためにやる」と自分本意に行動するようになったら疲れなくなった。人はそれぞれマイルールで生きていて、気持ちが動いたら参加するし自分にメリットがなきゃ参加しないもんだと気づいた。「良い人」とよく言われる人ほど、自分中心になるくらいが丁度良いと思う⇀

1

61

567

@kobayas_s

こばやす🍟現場のWebデザイナー

3 months

世の中はFigmaでWebサイトを作るのが主流になってきているようですが、私が在籍している会社ではWebサイトで作ったデザインを印刷物に落とし込む事もあり、移し替えするのが大変なのでイラレやフォトショで作る場合もあります。…

4

64

567

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

WebサイトのコーディングはVS codeでやってる。最低限入れたい拡張機能メモ 👉Highlight Matching Tag 👉HTML CSS Support 👉HTMLHint 👉IntelliSense for CSS class names in HTML 👉Japanese LanguagePack for Visual Studio Code 👉Material Icon Theme 👉Path Intellisense 👉stylelint

2

81

554

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

超特急でWeb制作を覚える手順 ❶HTML、CSS覚える ❷Webサイトカンプを作る ❸❷で作ったカンプを❶で覚えた事でPC版コーディング ❹❸が出来たらレスポンシブでコーディング jQueryやsass覚えるのはそれからでヨシ！まずはブラウザで見て崩れないWebサイトを作れる様になろう。各項目の具体的な事は→

1

64

550

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイン初学者の人と一緒にお喋りしながら勉強出来るオンラインコミュニティ作ろうかな。私も合間見て顔出して、質問に答えたり、宿題出したりする感じで。 Webデザインの塾みたいなイメージ。

16

20

543

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

まさかとは思うけど、WordpressのログインURL、 https://ドメイン名/wp-admin/って初期設定のままじゃないよね…？不正ログインされる危険性が高まるから、図星ならURL変えときましょ。 Login rebuilderっていうプラグイン入れれば速攻で変更できるよ。変更URLだけ忘れないように気を付けて。

2

45

547

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

【ヘッダーにありがちなデザインの不具合と解決法】ディレクターしてた時、Webサイトデザインのチェックで良くある問題をまとめてみた。 ①ヘッダー領域が広すぎてコンテンツが見辛い ②要素がヘッダーに被る ③メニューが多すぎる ④メニューがどこにあるかパッと見で不明確気を遣う所は沢山ある

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

67

511

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

【未経験からWebデザイナーを志望する方へ】元採用担当者がポートフォリオ作りを15,000文字以上解説したnote出来ました。4年間ひたすら応募書類を見た中で気づいた事をぎゅっと盛り込みました。 ①準備、構成、完成まで解説 ②採用担当者の考え解説 ③最終チェックリスト付

Tweet card media

Webデザイナーの採用担当をして好印象だった未経験応募者のポートフォリオ｜こばやす｜Webデザイナー

こんにちは、こばやす(@kobayas_s)です。以前「デザイナーの採用担当した私が良いと思ったポートフォリオ」というテーマで採用担当者目線で記事を書いたところ多くの反響を頂きました。また実際に採用担当をされている方からも多く助言を頂く事があったので、もう少し深堀りした記事を書こうと思いました。以上の記事は「基礎はOK」レベルの内容です。この記事では前回書いた内容に触れつつも、採用担当者...

1

73

508

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

インハウスデザイナーでWebサイト運用に携わる機会が多いですが、コンテンツが増えに増えて調整が難しくなってくる事は多々あります。なので、なるべく初回でコンテンツが増えても大丈夫な設計にしておくと超助かります。私がやっていた案件で良くある事案を図解してみました。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

44

480

@kobayas_s

こばやす🍟現場のWebデザイナー

2 months

デザインの上達が早い人ってセンスというよりも「細かい事に気付く勘の良さ」が影響している気がする。デザインのフィードバックをしても言われた通りに直すだけではなく、指摘の意図を汲み取り自分の頭で考えられる人は早くものに出来ているな、と成長するデザイナーの卵たちを見ていて思った。

1

33

482

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

インハウスWebデザイナーの現場。制作会社のように鬼タイトなスケジュールでは無いから比較的まったり働ける。でもサービスリリース前は超忙しい。デザイナーが少人数で先輩はほぼ居なく、自分で情報取りに行く、学べ無い人は技術の頭打ちが酷い。「周りがデザインに疎い」ので啓蒙活動が1番大変。

5

44

453

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイナーになりたいガチ勢はちゃんとプロになってる人から学びましょう。最近はブロガーの広告収入目的でライトに書いてる人多くなってきているから情報に惑わされやすいと思います。そんなブログ見るくらいなら参考書買った方が有益だよ。

4

34

453

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

デザイナーを目指すなら著作権の知識は絶対入れておいた方が良いのでお勧め本紹介。実際の事件を元に何故いけないのかを丁寧に説明してるし専門家監修だからネットを見るより信頼性が高い。会社でも分からない人は多いし、知らない間にタブーを犯してたりするからね…

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

60

432

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

私は独学でデザイナーになったんだけど、実績作りで役立ったのがボランティアの手伝い。地域とかのボランティアやってみると「広報出来る人」がいなくて、折角良い企画なのに人が集まらない事はよくある。そこで自分がイベントサイトやチラシを作ると超喜ばれる。そして実績にもなるから一石二鳥。

2

26

429

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

【バナー模写レイアウト練習方法】 ❶フォントは似たものであればOKとする ❷ロゴのトレースは不要、当たりだけ入れる ❸はじめはグレーの濃淡で色感を表現する今回はレイアウトメインなので素材探しには時間をかけずにやってみた例。「何に時間を割くべきなのか」考え模写練習するのかがコツ。

Tweet media one

1

56

423

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Web制作の話は難しく感じる事が多いから伝え辛い時がある。私がお客様と会話する時は「日常生活で使うもの」に変換して伝えているよ。そうすると相手の中にある知識と組み合わせて意識のすり合わせがしやすくなるから伝わりやすい。勉強も自分が知ってるものに例えると記憶に残りやすいはず。

Tweet media one

Tweet media two

4

36

414

@kobayas_s

こばやす🍟現場のWebデザイナー

8 months

デザイナーが思わず添削したくなるような #バナーお題を作ってみました。どこを改善すれば良いか分かった人は #違和感なデザインを付けて答えてみてね。初学者の人も腕試しで挑戦してもOK！このバナー制作依頼背景はリプ欄にあるのでそちらも確認してください➡

Tweet media one

10

59

419

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

電車座席指定の色表現で思った事。赤の表現って「注意」みたいなニュアンスがあって、この例だと「空いてません」の表現に見えた。指定席を取ってる人は空いてる席を探す必要が無いから、このランプを気にしないと想定すると ⚫︎赤色→指定席 ⚫︎緑→空席の方が良い気がするのは私だけだろうか…

Tweet media one

15

197

416

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイン図解tipsはこちらにまとめてます。随時更新。私が仕事で見聞きした事、実案件で感じた事をもとに作ってるので、現場では結構あるあるかも。

Tweet card media

Webデザインの学習Tipsまとめ

初学者に向けたデザインのヒントをまとめました。仕事で見聞きした事、実案件で感じた事をもとに作ってるので、いち現場の意見（一例）として見てください。随時更新するのでたまに覗いてみてね。

0

42

402

@kobayas_s

こばやす🍟現場のWebデザイナー

9 months

自分からすればやって当たり前だと思ってる事でも、会社では適当にやっている人が多い事にも気づいた。全てに全力だといざ力を入れたい時に疲れてしまうから力を抜いて良い所は抜いた方が良い。デザインも緩急つけるから良い所がもっと引き立つ。人間の生き方や仕事に関してもそれだと思う。

0

35

407

@kobayas_s

こばやす🍟現場のWebデザイナー

9 months

Webサイトで「枠だけ作って」とデザインを頼まれる事が度々あるのだけど、そういう案件は大体作り直しが発生する。「ビジュアルを見てから内容を詰めたい」という意図が含まれているのだろうけど、そもそも写真の構図やテキスト内容でページ構成やレイアウトも変わるという重要性が抜けている。

1

29

397

@kobayas_s

こばやす🍟現場のWebデザイナー

1 month

クライアント様、お急ぎの所大変恐縮ですが、修正は1度にまとめてご依頼頂けると大変助かります。デザイナーへの伝達が1度で済み、作業に全精力を注げるため迅速に最新データの納品が出来ます。更に再確認のお手間も減りますので、何卒ご協力の程お願い致します。…

Tweet media one

0

94

400

@kobayas_s

こばやす🍟現場のWebデザイナー

1 month

支給された写真が微妙だった場合の対処法 ❶何が微妙なのかリストアップし、NGレイアウトを確認 ❷不足を補い、素材を活かすレイアウトパターンを考える ❸写真を適度に整形してデザインに反映原型がなくなるまで加工が必要な場合や、そもそも素材として機能しない場合は相談するようにしてます。…

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

28

397

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

Webサイト制作をする時は工数表を作ってるよ。 1本のサイトをデザインからコーディングまで全て自分が作る場合はこんな感じ。ここまで細分化すると「今の進捗は何％」などタスク管理がしやすくなるし、もし分業化する事になっても「ここまで進んでるから、これをお願い」と説明しやすい。続く→

Tweet media one

1

52

394

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

【ヘッダーにありがちなデザインの不具合と解決法】ディレクターしてた時、Webサイトデザインのチェックで良くある問題をまとめてみた。 ①ヘッダー領域が広すぎてコンテンツが見辛い ②要素がヘッダーに被る ③メニューが多すぎる ④メニューがどこにあるかパッと見で不明確気を遣う所は沢山ある

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

37

392

@kobayas_s

こばやす🍟現場のWebデザイナー

10 months

現場ではデザインをクライアントへ説明する機会がよくあるんだけど、上手く言語化出来なくて悩む時がある。この本はデザインの細かい作りまで説明があって、文字や写真、色など各視点にもフォーカスしているので語彙力を鍛えたいなら参考になるかも。試し読みできるよ➡

Tweet media one

1

29

394

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイナーになるなら最低限覚えたい方が良いWebサーバー知識 Level1👉サーバー接続、データアップロード方法 → サーバー接続ソフトはFileZillaがお勧め Level2👉サーバーとドメイン紐付け →同じ会社の契約が相性良い Level3👉常時SSL化に対応したデータ作り →htaccess設定方法も覚えてね

2

32

385

@kobayas_s

こばやす🍟現場のWebデザイナー

6 months

インボイス制度を適用しない免税事業者の場合は請求書に「消費税」の欄を別に書くのではなく、サービス価格に乗せて記載するっていうのは知らなかった… この例で言うと、サービス料3万ではなく、税込の3万3000円と書くそうです。

Tweet card media

インボイス制度開始後の免税事業者の請求書

fukuoffice.co.jp

6

68

378

@kobayas_s

こばやす🍟現場のWebデザイナー

1 year

今までにツイートしたWebデザインに関するTipsはこちらにまとめています。主に初学者が悩みがちな内容多めです。 ❶画像加工のちょっとした工夫でオシャレにする方法 ❷Webサイトデザインで気をつけたい事 ❸ポートフォリオ制作で悩んだ時の対処方困った時は覗いてみてね！

Tweet card media

Webデザインの学習Tipsまとめ

初学者に向けたデザインのヒントをまとめました。仕事で見聞きした事、実案件で感じた事をもとに作ってるので、いち現場の意見（一例）として見てください。随時更新するのでたまに覗いてみてね。

2

34

363

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

Webデザインカンプの作り方note出来ました！ ①現場でやり取りされる構成内容 ②ワイヤーフレームの作り方 ③デザイン調整の仕方を載せてさらにPCとスマホデザインのカンプデータ付き。 twitterでは言わない制作ノウハウも詰め込んだので有料ですが勉強にお役立てください😊

Webデザインカンプを1から作るための説明書｜こばやす｜Webデザイナー

こんにちは、こばやす（@kobayas_s）です。 Webサイト制作の勉強しているけどコーディングばかりしていて、そう言えばWebサイトのカンプ（モックアップの事。1枚の画像でWebサイトのデザインを表現。のちにコーディングの材料となる）の作り方ちゃんと知らないや、とかありませんか？ twitterで調査してみたところかなり方がそう思っているようです。コーディング課題はチラホラあるけど、そ...

1

94

343

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

【ヘッダーメニューのデザイン不具合と解決方法】 Webサイトデザインしてて、よく指摘がある問題。 ❶ヘッダー領域が広すぎてコンテンツが見辛い ❷要素がヘッダーに被る ❸メニューが多すぎる ❹メニューがどこにあるかパッと見で不明確ユーザーが見ている環境・リテラシーを意識して作りたいね。

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

35

360

@kobayas_s

こばやす🍟現場のWebデザイナー

9 months

最近デスクを買い替えたのだけど、通販サイトにあった見た目と実際の色がだいぶ違っていてガッカリした。デザイナーは「商品を良く魅せるため」と思って加工したのだろうけど、やり過ぎると顧客満足度が落ちる。購入された後も満足度が高くなるようなデザインをしなければと改めて感じた実体験。

Tweet media one

1

36

357

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイナーになって1〜2年目が最も辛かった。 ⚫︎デザインの引き出しの無さ ⚫︎コードエラーの意味が分からない ⚫︎時間の見積が出来ず「いつ見せられる？」の質問に答え難い ⚫︎js？php？何それマックの新メニュー？ ⚫︎顧客の「もっと目立たせて」の意図が分からない色々あって今がある。

4

16

358

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイナーの応募書類見てると ❶スクール課題だけ ❷模写バナーデザインだけ ❸模写Webサイトだけが大変多い。課題や模写って、自分で考えて作った痕跡が分かり辛いので評価出来ない。実務では「与えられた要件をデザインに落とし込む」所が重要だから、それが出ているデザインを見せて欲しい。

2

35

352

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイナーは働き方が色々選びやすいから人生の節目で悩みがち。なので現場で見てきた先輩達の行動や行方を図解にしてみた。「次はこの道に行ってみるか！」など思考整理に役立つかも。どこがゴールとかはないけど、その時の生活環境にあった居心地良い働き方を見つけてる人は多いよ。

Tweet media one

1

42

348

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

Webデザイナー志望者のポートフォリオを見ていると、よくテキストテキスト…羅列で中身が無いサイトが多い気がします。デザインは「問題解決」のために使われるので、それだとあまり意味がありません…課題が考えられない人はフルページのお題を用意したので使ってみてね。

Tweet card media

構成からWebサイトデザインをしよう｜こばやす｜Webデザイナー

久しぶりにnote書きました。こばやす(@kobayas_s)です。 Webデザイン勉強中の方からよく「ポートフォリオに載せるほど実績が詰めていないです」「実務経験がそもそも無いのでポートフォリオが作れません」という悩みを聞きます。ポートフォリオは所謂デザイナーの商品サンプル。初学者の最難関ハードルとして、まず案件獲得するために必要なサンプルが無いと売り込み活動すらできませんよね。...

1

27

346

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザインスクールを選ぶなら ❶⚪︎ヶ月でデザイナーになれると言わない ❷簡単に稼げると言わない ❸学べる技術を具体的に表記してる ❹講師陣は現役で仕事した経歴がある ❺厳しい現実も話す ❻記事やツイートは現役じゃ無いと体験しない事や深みある内容になっているが質の良さを見抜くコツ。

2

31

338

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

うつ病って「心の病気」だと思ってたけど、実際なってみると「脳の病気」だと気付かされた。急性期で一番ヤバかった時はコーディング出来ない、仕様書読めない、好きなデザイン作業が楽しくないって絶望してた。でも今は楽しい気持ちが復活してきて、普通に仕事出来る様になったからそう言う事。

2

34

334

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

色んなサイズのデバイズが出回っていて、正直レスポンシブデザインのブレイクポイント考えるのって大変。 2019年時点でのサイズを一覧にしてくれているこの記事分かりやすくて良いよ！スマホ　W560px タブレット　W960px でメディアクエリ設定すると良いそうです。

【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 …

hashimotosan.hatenablog.jp

0

62

333

@kobayas_s

こばやす🍟現場のWebデザイナー

3 months

なんとなくから脱却する、購買意欲を沸かせるWebデザインが学べるお勧め本紹介。様々な心理学の実験例から、人間の感情に訴えかけるデザインに落とし込むための施策を解説しています。具体的なWeb制作への応用も書かれているので、制作で悩んだらすぐに使えるアイディアがギッシリ➡

Tweet media one

Tweet media two

Tweet media three

1

27

325

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webサイト制作をする時は対応リストを作ると良き。 1本のサイトをデザインからコーディングまで全て自分が作る場合はこんな感じ。ここまで細分化すると「今の進捗は何％」などタスク管理がしやすくなるし、もし分業化する事になっても「ここまで進んでるから、これをお願い」と説明しやすい。

Tweet media one

1

32

316

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

白背景のWebサイトって #FFFFFF になってると明る過ぎて目に刺さる時があるよね。特に余白多めで背景が主張しがちなデザインする時は #f7fcfe などすこーし薄い色をつけると落ち着いた感じになるだけでなく、コンテンツが際立ちとても見やすくなるよ✍️ 白系配色の参考は↓

Tweet card media

白しろ #ffffffの色見本とカラーコード - 和色大辞典

白しろ #ffffffの色見本とカラーコード。無彩色でRGBカラーモデルでは赤(Red):255(100%)、緑(Green):255(100%)、青(Blue):255(100%)で構成されています。

www.colordic.org

1

33

316

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

私が駆け出しだった時格安でデザインしてたけど、安過ぎると顧客の民度が低くてメンタル病んだのでMyルールを作った。 ❶2〜3名納品したら料金改定 ❷取引前や最中に起きた問題はメモ ❸❷を取引前の注意事項として顧客へ周知させるこれらをやって行く事で質の良い顧客と出会う事が増えてきましたよ。

5

25

306

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

「デザインの理論を語る」って初学者にしてみれば、宴の席で上司からひたすらお小言を聞かされてる気分になる時がある。でも相手の興味に刺さる話を展開した後、理論を語ると聞く姿勢を持ってくれるんだよね。この興味のフェーズがtwitterでは表層（見た目のデザイン）のTIPSなのだと思う。ただ→

Tweet media one

1

27

305

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

Webデザイナーを目指す人が多い世の中だけど、情報整理をきちんと出来る人は少ない。 ▶︎商品の情報を過不足、過多過ぎず伝える ▶︎意味あるページ誘導の配置 ▶︎ターゲットが興味を持つビジュアルの選定 ▶︎煩わせない購入の導線や情報入力の整理綺麗に並べるだけがデザイナーの仕事じゃないよ。

2

29

303

@kobayas_s

こばやす🍟現場のWebデザイナー

6 months

Adobeが無くてもWebデザインはFigmaだけでできる！と豪語しているポストを見かけたのですが、本当にそうなんですか…？私の仕事では、そのままデザインに使えるようレタッチや色調調整が完璧にされたものってほぼ無いんですが、他社ではそれが可能な会社もあるものなんですか…？

4

22

305

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

印刷の話が結構盛り上がって「名刺作りたい！」な方が結構いたので印刷所の話。メガプリントさんだと初回100枚無料で印刷出来るよ。どんな印刷が出来るかサンプルもいっぱい取り寄せられます。こんなキラキラなホログラムも出来るので見てるだけでもワクワク。

Tweet media one

Tweet media two

Tweet media three

2

36

301

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webサイト制作では工程を細分化した表をつくると「今の進捗は何％」などタスク管理がしやすくなるよ。作業を分配する事になっても「ここまで進んでるから、これをお願い」と全体像を相手に伝えやすい。図解はデザインからコーディングまで全て自分が作る場合の例。続く→

Tweet media one

1

30

293

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

【バナー模写レベル別学習】 Lv.1 フォトショ、イラレの操作方法に慣れる Lv.2 グラデ、文字ワープなど加工方法を学ぶ Lv.3 レイアウトを組む練習 Lv.4 配色のの練習 Lv.5 見本を少しずつ変えてオリジナリティを出す Lv.6 見本の情報整理をして同じテーマでオリジナルデザイン続く→

1

38

289

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

デザイナーを目指すなら著作権の知識は絶対入れておいた方が良いのでお勧め本紹介。実際の事件を元に何故いけないのかを丁寧に説明してるし専門家監修だからネットを見るより信頼性が高い。会社でも分からない人は多いし、知らない間にタブーを犯してたりするからね…

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

47

290

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

【購買意欲を掻き立てるアイディア参考書紹介】心理学の研究で証明された方法をデザインにどう落とし込んで行けば良いのかを解説。事例があるから真似しやすいし根拠があるから「アレと掛け合わせて使える」閃きの補助にもなって初心者プロ問わず読める。買わせるの心理学

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

35

294

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

最近初めてうつ病になって生死彷徨ってたんですが、ようやく趣味が少し出来るくらい回復。ここまで3ヶ月かかるとかしんどかった！食べれる様になってから色々試した結果 ❶肉料理 ❷チョコレート ❸バナナが一番幸福度回復したベスト3なので、病みがちな人は定期摂取してみると良いかもです。

10

19

289

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイン勉強中の時「実績作るため無料で制作を引き受ける」のやったけど大体泥沼で消耗した。ハマらない為には ❶無料引き受けは2〜3回までなど限定する ❷ページ数3p以内など制限する ❸修正回数制限 ❹TOPデザイン決定後戻り無し約束する ❺原稿、素材は揃った状態で開始は最低ルールにしたい。

3

30

283

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

Webサイトの提案をする時は根拠をプラスして提案すると納得して貰いやすい。 ×「どういうデザインをご希望ですか？」〇「御社は年配の方に向けて情報発信をしたいと伺ったので、落ち着きのあるテイストで直感的に分かりやすいレイアウトを軸に考えたいと思っておりますがいかがでしょうか？」続く→

1

30

287

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

Webデザイナーになれた途端安心して勉強しなくなる人もいるけど、なってからが本番。最初はどんな小さな仕事でも自分の最善を尽くして丁寧にやろう。面白い仕事は出来る人に回ってくる。日々の積み重ねが出来ないと自分がやりたい仕事も出来ないし、スキルアップも出来ないよ。

1

11

288

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

未経験と求人に記載すると未学習の人が沢山応募しにくるけど「未経験＝勉強してない」ではないよ。未経験（だけどフォトショイラレが一人で問題解決出来るくらい使えてデザインの基礎知識がありWebサイトのカンプをオリジナルで1本作れて…）などの但し書きが付いてるけど長いから省略しているだけ。

3

26

283

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

スクールはツールとかコーディングの事は教えてくれるのに、サーバーのアップロード方法教えてくれないとかマジか… うちに入ってくる新人もサーバー!?🤪って感じで繰り返し教えるのメンドイので、Webサイトをアップロードする方法くらい公開で教えます！ 23日夜YouTube生配信するのでしばしお待ちを。

4

22

272

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

「Webデザイナーはコーディング覚えるべきか」問題。ゴリゴリに出来る必要は無いけど、知識としては合った方が良い派。 ❶Webデザインで実現可能か ❷コーディングする時に何か問題は起きないか検討する時コーダさんとのコミュニケーションがしやすいので、勉強して損は無い。 #できるかもデザイン

1

29

276

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

「事業会社と制作会社の違い」は良く聞かれるので図解したよ。ご質問の ❶事業会社のデザイナー採用枠の探し方 ❷5か月間職業訓練でWeb制作とデザインを学んだ人でもデザイナーを目指せるのかですが、質問主の「紙デザインもやりたい」理由なら印刷系制作会社がWebに手を出し始めてたりもするので⇀

Tweet media one

Tweet media two

Tweet media three

1

32

271

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

WebデザイナーはひたすらPC画面を見続けて同期は皆眼鏡っていうぐらい目悪くなる。私の場合は眼精疲労からくる肩凝りが酷かったからPC眼鏡を導入したんだけどめっちゃ改善された。 JINSのPC眼鏡はクリア素材だから色見る作業もそんなに差異が無くて良いのでお勧めしときます。

Tweet media one

2

56

272

@kobayas_s

こばやす🍟現場のWebデザイナー

3 years

#できるかもデザインでギャラリーサイトの話出たので私的お勧め↓ 日本のWebサイトに絞っていて、イマドキなデザインが厳選されてる。女性向けのデザインに特化したギャラリーカテゴリ分けがめちゃ細かくて探しやすい

1

31

268

@kobayas_s

こばやす🍟現場のWebデザイナー

2 years

デザインなど技術を売りにしている人に対して「無料で作って（教えて）」と言う事を「技術カツアゲ」と私は呼んでいる。スキルアップするために費やした労力（時間・道具や書籍購入など）をタダでくれって言うようなものだよね。同じように言われたら、貴方は快く提供できるのかな？続→

3

20

265

@kobayas_s

こばやす🍟現場のWebデザイナー

4 years

【ポートフォリオで良くあるツール熟練自己評価】添削してると多くの人が「自己評価★★☆」で終わりがち。他の人が見たら★2かもしれないし、★5の時もある。なので ❶このツールはどの作業で使用しているのか ❷このツールでどんな実績・作品を作ったのかまで明記すると意思疎通が取りやすいよ。

Tweet media one

2

39

266