G R O U N D B E A T

Webデザイナー・UI/UXデザイナー・アートディレクター・Webデザイナー講座講師 …

G R O U N D B E A T

Webデザイナー・UI/UXデザイナー・アートディレクター・Webデザイナー講座講師 https://gbn.jp/ ポートフォリオはこちら https://gbn.jp/portfolio ID：gbn パスワード：gu●●t（英語小文字でお客様）

  • 私がWebのデザイナーになった理由

    「人生わからないものだなあ」の記憶をまとめました

  • WEB DESIGN SCHOOL

    Webデザイナー講座で講師を勤めた時に使った15時間分のオリジナルテキストを公開します。まずは3時間分バナー作成からアップしました。

パートナー（営業さん）募集

GROUND BEATではパートナーを組んでいただける営業さんを募集します。 年齢・性別・経験・地域などは問いません。 ・フリーランスの営業の方／副業で営業をされている方 …

G R O U N D B E A T
G R O U N D B E A T
2か月前
1

私がWebのデザイナーになった理由⑧（フリーランス）

制作会社で4年間、デザイン部統括兼アートディレクターでやっておりましたが、いよいよフリーランスで活動をはじめます。円満退社です。 さてフリーランスでやっていこう…

G R O U N D B E A T
G R O U N D B E A T
2か月前
6

私がWebのデザイナーになった理由⑦（制作会社）

デザインプロダクションで様々な企業のブランディングなどに関わっていたところ、広告代理店時代からのお付き合いで当時もシステム関係のお仕事をお願いしていた社長からお…

G R O U N D B E A T
G R O U N D B E A T
2か月前
5

私がWebのデザイナーになった理由⑥（デザインプロダクション）

広告代理店で約4年、立場は主任。役割はWebデザイナー兼ディレクターでした。 その当時、デザインプロダクションで有名な会社が3社ほどありました。 やってる仕事も自社サ…

G R O U N D B E A T
G R O U N D B E A T
2か月前
1

私がWebのデザイナーになった理由⑤（広告代理店）

Webデザイナーとしてはじめての会社は広告代理店でした。 その当時Webははじまってまだ間もない頃。 職域なんて誰も知らないころ。 色々やりました。 最初の頃はJavaScri…

G R O U N D B E A T
G R O U N D B E A T
2か月前

私がWebのデザイナーになった理由④（はじめの一歩）

個人サイトが雑誌やネットメディアで取り上げられるようになり、なんだか楽しくなってきました。承認欲求ってやつですかね。 当初の目的の音楽制作もやってましたが、楽し…

G R O U N D B E A T
G R O U N D B E A T
2か月前
4

私がWebのデザイナーになった理由③（Macを買ったぞ）

さて先輩がMacを買ったと聞いた私。 その当時は、Windows95が出てきた頃で、Mac（当時はMacintosh）もキャンペーンをしてて色々な機種を出していました。 その当時、音楽…

G R O U N D B E A T
G R O U N D B E A T
2か月前
1

私がWebのデザイナーになった理由②（アパレル時代）

キツい専門学校時代、いよいよ卒業の時期が迫ってきました。 どこかのブランドやメーカーに就職したかったので、いくつか面接もしていましたが、今も昔も性格というものは…

G R O U N D B E A T
G R O U N D B E A T
2か月前
4

私がWebのデザイナーになった理由①（夢見る時代）

これからWebデザイナーやUI/UXデザイナーになりたいと思われている方には一切参考にならない経歴です 自信を持って 笑 人生わからないものだなあと思っていただけたら嬉し…

G R O U N D B E A T
G R O U N D B E A T
2か月前
1

お客さんのことをシロウトって呼ばないで

こんにちは。 先だって違和感を覚えた言葉がありました。 何に違和感を覚えたのかを整理したくて書いてます。 クライアントさんからある案件を依頼された企業さんが委託…

G R O U N D B E A T
G R O U N D B E A T
2か月前

ディレクションで困っている方へ。

デザインなどのディレクションで困っている方へ。 私のやってることが参考になればいいなと思って書きました。 過去に自社の提案するデザインの差し戻しが多く困っている…

G R O U N D B E A T
G R O U N D B E A T
3か月前
1

012 バナーを作ろう! -画像を書き出そう-

ヘッダー画像：UnsplashのWedding Photographyが撮影した写真 PhotoshopのPSD形式だとバナーとして納品はできないので、納品先の指定に合わせて画像を書き出しましょう。 …

G R O U N D B E A T
G R O U N D B E A T
1年前

011 バナーを作ろう! -レイヤーを整理しよう-

ヘッダー画像：UnsplashのMarkus Petritzが撮影した写真 さて大体出来ましたね。 ここからは見た目はかわらなけど、意外とその後の作業効率に関わる作業。 バナーくらい…

G R O U N D B E A T
G R O U N D B E A T
1年前

010 バナーを作ろう! -背景画像を調整しよう-

ヘッダー画像：Unsplashのvishwajeet nishadが撮影した写真 前回、文字調整まで終わりました。 私もちょっとフォントを変えたり、文字間隔を調整してみました。 ↓こんな…

G R O U N D B E A T
G R O U N D B E A T
1年前

009 バナーを作ろう! -文字組をしてみよう-

ヘッダー画像：UnsplashのRemy_Lozが撮影した写真 STEP01.文字組みをしてみよう（1）「2022年 12⺼1日（木）OPEN!」のレイヤーサムネイル部分をダブルクリックで文字を選…

G R O U N D B E A T
G R O U N D B E A T
1年前

008 バナーを作ろう! -ボタンを作ろう-

ヘッダー画像：UnsplashのChinda Samが撮影した写真 STEP01.四角形で土台を作るよ（1）横314px、縦36px、塗り#e5004f、線無しの長方形を作ります （2）ガイド内の一番下…

G R O U N D B E A T
G R O U N D B E A T
1年前
G R O U N D B E A T

G R O U N D B E A T

パートナー（営業さん）募集

パートナー（営業さん）募集

GROUND BEATではパートナーを組んでいただける営業さんを募集します。
年齢・性別・経験・地域などは問いません。

・フリーランスの営業の方／副業で営業をされている方
　またはそういった活動をお考えの方
・退職後に在職中の人脈を活かしたい方
・クリエイティブの営業がしたい方

GROUND BEATはWEB制作、その他デザイン関連を業務としています。
大手企業から個人商店まで、子供用のサービ

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由⑧（フリーランス）

私がWebのデザイナーになった理由⑧（フリーランス）

制作会社で4年間、デザイン部統括兼アートディレクターでやっておりましたが、いよいよフリーランスで活動をはじめます。円満退社です。

さてフリーランスでやっていこうと思ったのですが、問題なのが営業活動。苦手。そんなのやったことない。どうしよう。
と思っていたのですが、そこは今まで流れに流されて生きてきた私です。多分なんとかなるだろうと思ってたんですね。

ここで挫折！その方が期待通り！の展開だと思っ

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由⑦（制作会社）

私がWebのデザイナーになった理由⑦（制作会社）

デザインプロダクションで様々な企業のブランディングなどに関わっていたところ、広告代理店時代からのお付き合いで当時もシステム関係のお仕事をお願いしていた社長からお誘いがありました。

システム系からはじまりWeb系の制作会社になっていた企業で、デザイン部の統括をしてほしいとのお誘いでした。

デザインプロダクションで自由にやっていた身としては、複数の若いメンバーをまとめる仕事ができるのか？と不安もあ

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由⑥（デザインプロダクション）

私がWebのデザイナーになった理由⑥（デザインプロダクション）

広告代理店で約4年、立場は主任。役割はWebデザイナー兼ディレクターでした。

その当時、デザインプロダクションで有名な会社が3社ほどありました。
やってる仕事も自社サイトも格好いいんです。憧れてました。

そんな時、アパレル時代の仕入れ先の担当者さんから久しぶりに連絡がありました。
今、デザイン会社をやっていて良い人探してるんです。誰か知ってる人いますか？とのこと。
へーどこですか？と聞くと。

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由⑤（広告代理店）

私がWebのデザイナーになった理由⑤（広告代理店）

Webデザイナーとしてはじめての会社は広告代理店でした。

その当時Webははじまってまだ間もない頃。
職域なんて誰も知らないころ。

色々やりました。
最初の頃はJavaScript、CGIなんて触ったこともないものを本で調べながら（検索してもその頃のネット上には情報なんてないのです…）
HTMLもみんな探り探りでした。Web1.0時代ですね。

数年経ち専門職域が理解されてからは、外部にお願い

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由④（はじめの一歩）

私がWebのデザイナーになった理由④（はじめの一歩）

個人サイトが雑誌やネットメディアで取り上げられるようになり、なんだか楽しくなってきました。承認欲求ってやつですかね。

当初の目的の音楽制作もやってましたが、楽しい趣味として続けていくことにしました。

そして色々と理由はありますが、転職することになりました！
転職すると決めた時にはアパレル数社からありがたいお誘いもありました。

Webの世界に行きたいと思っていた私はお誘いいただいた方々とお会い

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由③（Macを買ったぞ）

私がWebのデザイナーになった理由③（Macを買ったぞ）

さて先輩がMacを買ったと聞いた私。

その当時は、Windows95が出てきた頃で、Mac（当時はMacintosh）もキャンペーンをしてて色々な機種を出していました。
その当時、音楽と言えばMacでした。
Macが欲しい！
Macを買えばミラクルな音楽ができるはず！と思っていました。
当たり前ですがそんなことはない 笑

さて数日悩んで勇気を出してMacを買ったぞ！

シーケンサーソフトも買い

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由②（アパレル時代）

私がWebのデザイナーになった理由②（アパレル時代）

キツい専門学校時代、いよいよ卒業の時期が迫ってきました。
どこかのブランドやメーカーに就職したかったので、いくつか面接もしていましたが、今も昔も性格というものは変わらないもので、先に友だちが内定をもらったアパレルメーカーに誘われるまま就職が決まりました。

配属は制作。デザイン、パターンメイキングもさせてもらいましたがその後の人生を決定づけるであろう職種も経験しました。

会社によって呼び方が違う

もっとみる
G R O U N D B E A T

G R O U N D B E A T

私がWebのデザイナーになった理由①（夢見る時代）

私がWebのデザイナーになった理由①（夢見る時代）

これからWebデザイナーやUI/UXデザイナーになりたいと思われている方には一切参考にならない経歴です 自信を持って 笑
人生わからないものだなあと思っていただけたら嬉しいです。

簡単にまとめると
アパレルメーカー数社（並行して音楽制作）→広告代理店→デザインプロダクション→制作会社→フリーランスのデザイナーが私の経歴です。
音楽制作は職業ではないので括弧内の言葉ですがこれが重要な伏線となってい

もっとみる
G R O U N D B E A T

G R O U N D B E A T

お客さんのことをシロウトって呼ばないで

お客さんのことをシロウトって呼ばないで

こんにちは。
先だって違和感を覚えた言葉がありました。

何に違和感を覚えたのかを整理したくて書いてます。

クライアントさんからある案件を依頼された企業さんが委託先を探して私に声をかけてくださったミーティング。
一つはディレクション。一つはデザイン。（異なる企業）

企業さんの担当者さん（代表の方）たちが、言った言葉とは。
「相手はシロウトだから色々言ってくるけど」
「シロウトだからわからないで

もっとみる
G R O U N D B E A T

G R O U N D B E A T

ディレクションで困っている方へ。

ディレクションで困っている方へ。

デザインなどのディレクションで困っている方へ。
私のやってることが参考になればいいなと思って書きました。

過去に自社の提案するデザインの差し戻しが多く困っていると相談されたことが何回かあります。

デザイナーはいるけどディレクションがうまくいっていない。
「どうやってデザインを提案しているのか」を聞きたいとのこと。

同じようなお悩みを抱えている方へ少しでも足しになればと思い勝手な私の考えをまと

もっとみる
G R O U N D B E A T

G R O U N D B E A T

012 バナーを作ろう! -画像を書き出そう-

012 バナーを作ろう! -画像を書き出そう-

ヘッダー画像：UnsplashのWedding Photographyが撮影した写真

PhotoshopのPSD形式だとバナーとして納品はできないので、納品先の指定に合わせて画像を書き出しましょう。
JPG（ジェイペグ）やPNG（ピング）形式が一般的だと思います。

ここではPNGで書き出します。
文字が入るとPNGの方がキレイかな。

書き出し形式は色々と設定があるので、バナーの容量をオーバー

もっとみる
G R O U N D B E A T

G R O U N D B E A T

011 バナーを作ろう! -レイヤーを整理しよう-

011 バナーを作ろう! -レイヤーを整理しよう-

ヘッダー画像：UnsplashのMarkus Petritzが撮影した写真

さて大体出来ましたね。
ここからは見た目はかわらなけど、意外とその後の作業効率に関わる作業。

バナーくらいだったらレイヤー数もたかが知れてるけど、PhotoshopでもXDでもデザインを作るとレイヤー数がとんでもないことになって後で苦労します。

なので私の場合はデザインが一通り終わったらレイヤーを整理することにしてい

もっとみる
G R O U N D B E A T

G R O U N D B E A T

010 バナーを作ろう! -背景画像を調整しよう-

010 バナーを作ろう! -背景画像を調整しよう-

ヘッダー画像：Unsplashのvishwajeet nishadが撮影した写真

前回、文字調整まで終わりました。
私もちょっとフォントを変えたり、文字間隔を調整してみました。
↓こんな感じ

では背景画像を調整してみますよ。

STEP01　背景画像の見え方を自分なりに調整自分でよい！と納得する大きさ、位置にしてみてください。
サンプルの画像の場合は美味しそうに見えて、文字の可読性も失われない

もっとみる
G R O U N D B E A T

G R O U N D B E A T

009 バナーを作ろう! -文字組をしてみよう-

009 バナーを作ろう! -文字組をしてみよう-

ヘッダー画像：UnsplashのRemy_Lozが撮影した写真

STEP01.文字組みをしてみよう（1）「2022年 12⺼1日（木）OPEN!」のレイヤーサムネイル部分をダブルクリックで文字を選択状態にします

（2）文字の設定

文字パネルでフォントを「ヒラギノ角ゴ」ウエイトを「W6」（フォントはなんでもOK！文字の太さが選べるやつがいいね）文字サイズを28px、カラーを「#91908c」カ

もっとみる
G R O U N D B E A T

G R O U N D B E A T

008 バナーを作ろう! -ボタンを作ろう-

008 バナーを作ろう! -ボタンを作ろう-

ヘッダー画像：UnsplashのChinda Samが撮影した写真

STEP01.四角形で土台を作るよ（1）横314px、縦36px、塗り#e5004f、線無しの長方形を作ります

（2）ガイド内の一番下に配置します

移動する時は移動ツールね。

STEP02.三角の矢印を作るよ（1）まずは四角を作ろう

横10px、縦10px、塗り無し、線2px #ffffff （白）の長方形を作ってね

（

もっとみる