「GitとGitHubって、よく聞くけど、正直よくわからない…」

こんな悩みを持ってる人は意外と多いのではないでしょうか。

とくに私のように未経験でWeb業界に転職した方は「プルリク」「リポジトリ」「プッシュ」…

分からない単語だらけで頭の中が真っ白に。

「横文字多すぎて爆発しそう、、、（泣）」私が初めてGitとGitHubについて教えて頂いたときこう思っていました。（笑）

Git、GitHub、Sourcetreeなどのツールは、ほとんどのプロジェクトで使われており

効率的に作業を進めるサポートをしてくれます

しかし、私のように初めて使う人にとっては「そもそもGitって何？」や「GitHubはどう使えばいいの？」といった疑問が湧くものです。

まずはGitとGitHubはどんなものなのか、どのような場面で便利なのか理解していきましょう！

この記事を読み終えた後、GitとGitHubを使って自分のプロジェクトを管理できるようになり、

チームでの共同作業にもスムーズに対応できるようになりますよ！

GitとGitHubの基本

Gitって何？

Gitとはファイルの変更を記録し、いつでも過去の状態に戻すことができるツールです。

プロジェクトが進んでいくとさまざまな変更が加わり、どのタイミングで何が変わったのかを追いかけるのは大変です。

複数人で業務を行うことがありますからね…

それが、Gitを使うと全ての変更を自動的に記録し、問題が発生しても簡単に変更前に戻すことができます。←便利ですね！

これにより、複数人で業務を進める際も作業がより安全に効率的に進められます。

GitHubって何？

GitHubとはインターネット上でGitを使ったプロジェクトを保存し共有できるプラットフォームです。

リモートで作業している際にも他のメンバーとプロジェクトを共有し、連携をスムーズにできます。

GitとGitHubを組み合わせれば、プロジェクト管理が効率的になり、チーム全体の作業がより円滑に進みます。

効率的な作業を支えるバージョン管理

ここで大切になってくるのはバージョン管理です！

バージョン管理は、プログラムやデザインの作業を効率的に進めるために欠かせないシステムです。

プロジェクトが複雑になるほど、多くのファイルやコードが変わっていくため

「どの変更が正しいのか」「間違えた場合にどう戻せるか」を管理することがとても大事になってきます。

Gitを使えば、すべての変更履歴を保存し、以前の状態にいつでも戻すことができます。

これにより作業のミスを防ぎ、トラブルを未然に回避することができます。

簡単なGitの仕組みは図のようになっています。

GitとGitHubの用語解説

基本用語の解説

GitやGitHubに出てくる専門用語には、初めて聞くものがたくさんあるかもしれません。←私も最初は大変でした…

でも、心配はいりません！

ここでは、初心者の方にもわかりやすいように、

基本的な用語を一つずつ丁寧に解説していきます。

これらの言葉の意味がわかると、GitやGitHubの理解もスムーズになりますよ！

Gitを詳しく

上記で説明した通りGitはコードの変更履歴を保存してくれるツールです。

Gitを使うと、いつでも過去のバージョンに戻ることができ、万が一間違えてしまっても簡単に元の状態に復元できます。

バージョン管理システムの基本

バージョン管理システムとは、ファイルやコードの変更履歴を追跡し、記録してくれるシステムです。

バージョン管理システムがあると複数のメンバーが同時にプロジェクトに取り組んでも、

誰が何を変更したのかを簡単に把握でき、変更が衝突するのを防ぐことができます。

Gitはこの役割を果たすシステムの中で非常に人気があり、特にチーム開発では欠かせないツールです。

ローカルリポジトリの役割

Gitで作業を行うとき、プロジェクトは通常、ローカル環境に「リポジトリ」として保存されます。

リポジトリとは、変更履歴やファイルをまとめて管理する場所です。

自分のPCにあるローカルリポジトリで作業を行い、

変更内容を記録してから、必要に応じてインターネット上にあるリモートリポジトリにアップロードすることで、他の人と共有できます。

主な操作の流れ

１．コミット

コミットを行うことで、その時点でのプロジェクトの状態が記録されます。

２．ブランチの作成

これにより、メインのコードに影響を与えずに新しい機能を追加したり、問題点を修正できます。

３．マージ

テストが完了した変更をメインのコードに反映させることができます。

Gitを使うことで安全かつ効率的にコードの管理ができるようになります。

GitHubを詳しく

一章で説明したとおりGitHubは、Gitで管理されたプロジェクトをインターネット上に保存し

他の人と共有したり、共同で開発を行ったりできるプラットフォームの事です。

GitHubを使うと、メンバーがリモートでプロジェクトにアクセスできるため、

どこにいても同じプロジェクトに参加できて進行状況を確認し合うことができます。

リモートリポジトリの概念

リモートリポジトリとは、インターネット上に保存されているプロジェクトのデータの保管場所です。

通常、Gitではローカルにリポジトリを作成して変更を記録しますが、

GitHubを使えば、このリポジトリをオンライン上に保存し、メンバーと共有できるようになります。

リモートリポジトリは、プロジェクトの「共通の保管場所」として機能し、

業務中はメンバーと進捗を共有したり、最新の内容を取り込んだりできる重要な役割を担っています。

GitHubの利点

○コラボレーション

GitHubでは、複数のメンバーが同時に作業を行うことができます。

それぞれのメンバーが別々の作業をしても、変更内容がリモートリポジトリに統合されるため進捗を

ひとつにまとめられるのがメリットです。

コラボレーションのためのさまざまな機能も充実しており、

GitHubはチーム開発において欠かせないプラットフォームです。

○プロジェクトの共有

GitHubでは、リポジトリを公開することで、他の人にプロジェクトを簡単に見てもらうことができます。

オープンソースプロジェクトでは、全世界の開発者が参加し、自由に改良や提案を行うことができます。

※オープンソースプロジェクトとは

誰でもソースコード（プログラムの設計図）を見ることができて、

自由に使ったり、修正したり、配布したりできるプロジェクトのことです。

特徴は、プログラムのソースコードが公開されていて誰でも貢献することができます。

GitHubの基本機能

○プルリクエスト

プルリクエストは、コードの変更を他のメンバーにレビューしてもらう機能です。

自分が書いたコードが正しいか、問題がないかを確認してもらい、チーム全体で高品質なコードを保つことができます。

プルリクエストが承認されると、変更内容がリモートリポジトリに反映され、プロジェクトに正式に組み込まれます。

○イシュートラッキング

イシュートラッキングとは、バグや新機能の要望、改善点などを「Issue」として記録し、管理する機能です。

誰がどの課題に取り組んでいるかが一目でわかるので、プロジェクトの進行状況が明確になります。

また、Issueごとにコメントや進捗を追加できるため、プロジェクト全体の管理も効率的に行えます。

コマンドラインの基本操作

ここでは、GitとGitHubを使った基本的な操作を、初心者向けに簡単に解説します。

コマンドラインを使った操作方法も、できるだけシンプルに説明していきます。

Gitを使うには、コマンドラインと呼ばれるテキストベースの操作方法を使います。

最初は少し戸惑うかもしれませんが、基本のコマンドを覚えるだけで、簡単に使い始めることができます。

Gitのよく使うコマンド

初心者がよく使う基本的なコマンドを紹介します

ローカルリポジトリの作成

Gitを使い始めるには、まずローカルリポジトリというものを作ります。

1.プロジェクトのフォルダを作成します。

例えば「my-project」というフォルダを作りましょう。

2.コマンドラインでそのフォルダに移動します

3.フォルダ内でGitを初期化します

これで、my-projectフォルダがGitのリポジトリになります。これからの変更が記録できるようになります。

コミット、プッシュ、プルの流れ

バージョン管理をする際の基本的な流れを見てみましょう。

1.コミット（変更を保存）

ファイルを編集したら、その変更をリポジトリに保存する必要があります。

変更したファイルを保存する準備をします

すべての変更を追加する場合は、gid add.を使います。

次に、変更を保存（コミット）します

2.プッシュ（変更を送信）

変更を保存したら、インターネット上のリポジトリ（GitHubなど）に反映します

mainは、主に使われるブランチの名前です。

3.プル（最新の変更を取得）

他の人が行った変更を自分の環境に取り込むときに使います

これで、最新の状態が自分の作業環境にも反映されます。

Sourcetreeを使った操作

Sourcetreeは、Gitの操作をグラフィカルに簡単に行える便利なツールです。

コードをテキストベースで操作するのが難しい方にとって、直感的に使えるビジュアルツールです。

Sourcetreeのインストールと設定

1.インストール
Sourcetreeの公式サイトからダウンロードしてインストールします。

2.設定
初回起動時に、GitHubアカウントを連携する設定があります。

GitHubのアカウント情報を入力して、接続を完了させましょう。

リポジトリの作成からコミット、プッシュまでの手順

1.リポジトリの作成

Sourcetreeを開き、「新しいリポジトリを作成」を選択し、プロジェクトフォルダを指定します。

これでローカルリポジトリが作成されます。

2.コミット

プロジェクトでファイルを変更したら、Sourcetreeの「作業ツリー」タブで変更内容を確認できます。

コミットしたいファイルを選択し、「コミット」ボタンをクリック。

変更内容を説明するメッセージを入力して、コミットを完了させます。

3.プッシュ

コミットした内容をリモートリポジトリに反映させるには、「プッシュ」ボタンをクリックします。

対象のリモートリポジトリを選び、プッシュを実行します。

プルリクエストの作成方法

1.新しいブランチを作成

プルリクエストを作成するには、まず新しいブランチを作成します。

Sourcetreeで「新しいブランチを作成」を選択し、ブランチ名を入力して作成します。

2.変更をコミットしてプッシュ

ブランチで行った変更をコミットし、リモートリポジトリにプッシュします。

3.プルリクエストの作成

プッシュが完了したら、GitHubのリポジトリページに移動し、画面上部の「New pull request」ボタンをクリック。

変更内容を確認して、プルリクエストを作成します。

まとめ

今回は、GitとGitHubの基本、Sourcetreeを使った操作方法を紹介しました。

私も最初はGitやGitHubの操作にとっても苦労しました。

操作が難しく感じて、何度もつまずき投げだしそうになりましたが、

少しずつ慣れていくと「こんなに便利だったんだ！」と実感するようになりました。

最初はうまくいかなくても、全然問題ありません！大丈夫です！！

Sourcetreeのようなツールを使いながら、自分のペースで進めていきましょう！

小さな一歩から始めて、一緒に成長していきましょう！

The post 【初心者でも安心！】初めてのGitとGitHub！【未経験デザイナー奮闘記】 first appeared on 株式会社六次元（ROKUJIGEN）｜デジタルマーケティング.

以前バナーのリサイズについて記事を書きましたが、今回はバナーの作成についてお話しします。

バナーのリサイズに慣れてきたら今度はバナーの作成にチャレンジしていきましょう。

バナーのリサイズには慣れてきたけど、リサイズばっかりはもう飽きたよ！！！

じゃあ、今度はバナーの作成にチェレンジしてみる？？

バナー作成はちょっとしたコツを知っておくだけで仕事の成果を出す近道になると思います。

今回はデザイン初心者の方の為にバナー制作の手順と必ず押さえておくべき基本をご紹介していきます。

バナーってなに？

バナーは私たちが日々インターネットを利用している中で、知らず知らずのうちに目にしていますよね。

バナーは、商品やサービスの魅力を伝えるための強力なツールであり、クリック率やコンバージョン率を大きく左右します。

（※コンバージョン率＝最終的な成果に至った人の割合の事です！）

しかし、

「効果的なバナーを作るにはどうしたらいいの？」と疑問に思う方も多いとおもいます！

この記事ではバナー作成の基本をわかりやすく解説し魅力的で機能的なバナーを作れるように解説をしていきます。

バナー作成のコツを掴んで、ウェブデザインのスキルをさらに磨いていきましょう！

バナーの目的

バナーの目的は、ユーザーの目を引き、商品やサービスのプロモーションを効果的に伝えることです。

バナーは、クリックを誘導してウェブサイトへのアクセスを増やし、

最終的にはコンバージョンにつなげる役割を持ちます。

また、ブランドの認知度を高めるためにも重要な役割を果たします。

簡単にまとめると、バナーの目的は「視覚的にアピールし、ユーザーの行動を促すこと」です。

バナーは、ウェブサイトやオンライン広告でユーザーの目を引き、

クリック率やコンバージョン率に大きな影響を与える重要な要素です。

効果的なバナーは、視覚的に訴えかけユーザーにアクションを促す力があります。

しかし、

バナー作成にはデザインの知識だけでなくサイズやフォーマットの選び方

メッセージの伝え方などさまざまな要素が絡んでいます。

この記事では、バナー作成初心者の方を対象にバナーの基本的な作成手順から、

効果的なデザインのポイントまでを分かりやすく解説します。

この記事を読むことで魅力的で成果の出るバナーを作成するための基礎知識を学ぶことができます！

バナー作成の基本的な要素

画像の解像度とフォーマット

バナー作成において、画像の解像度とファイルフォーマットの選択は非常に重要です。

解像度が低すぎると、ぼやけた画像になりプロフェッショナルな印象を損ねてしまいます。

解像度が高すぎるとファイルサイズが大きくなり、ページの読み込みが遅くなってしまうリスクがあります。

高解像度 vs ウェブ向け最適化

高解像度の画像は、特に印刷物や大きな画面での表示に適しています。

しかし

ウェブバナーでは、ファイルサイズを抑えるために、最適化された解像度を選ぶことが推奨されます。

一般的には、72dpi（ドットパーインチ）がウェブ用の標準解像度とされており、

これにより十分な画質を保ちながら、ページのパフォーマンスを損なわない軽量な画像を使用できます。

※dpi（ドットパーインチ）＝1インチ（=25.4mm）当たりの画素数のこと

画像フォーマットの選び方

画像フォーマットも、バナーの見た目やパフォーマンスに大きく影響します。

それぞれのフォーマットの長所と短所をまとめました。

JPG

写真やグラデーションの多い画像に適しています。

ファイルサイズを小さくできるため、ウェブページの読み込み速度に優れていますが、

圧縮によって画質がやや劣化することがあります。

PNG

透明背景や、細かいグラフィック要素を使用する場合に適しています。

画質を劣化させずに保存できますが、JPGに比べてファイルサイズが大きくなりがちです。

SVG

ベクター画像のフォーマットです。

ロゴやアイコンのようなシンプルなデザインに適しています。解像度に依存せず、どのサイズでも鮮明に表示できます。

ファイルサイズも小さく保てるため、レスポンシブデザインに最適です。

※レスポンシブデザイン＝（ユーザーが使用するPCやスマートフォン、タブレットなどの画面サイズに合わせて、自動で最適化させるデザイン）

選び方のポイント

バナーの内容や目的に応じて、フォーマットを使い分けましょう

写真中心のバナーならJPG、透明な背景が必要ならPNG、シンプルなロゴやアイコンならSVGがおすすめです。

また、必ず画像を最適化し、ページのパフォーマンスを損なわないようにすることが大切です。

効果的なデザインのポイント

バナーは、ユーザーの目を引き、メッセージを素早く伝えるために、効果的なデザインが重要です。

以下の3つのポイントを押さえておくと、魅力的なバナーを作ることができます。

配色の選び方

配色はデザインの印象を大きく左右します。

コントラストのある配色を使うと、メッセージがはっきりと際立ちます。

ブランドカラーをベースにしつつ、

テキストやボタンが見やすいようにバランスを取ることが大切です。

フォントの選び方

テキストは、読みやすさが最優先です。

大きくてはっきりしたフォントを選びユーザーが一目で内容を理解できるようにしましょう。

複雑なフォントや小さすぎる文字は避け、見やすさを重視します。

余白の活用

余白を効果的に使うことで、デザインにメリハリが生まれ、メッセージが強調されます。

要素を詰め込みすぎず、シンプルで見やすいレイアウトにすることが、バナーを効果的に見せるポイントです。

なるほど！ポイントはよくわかったよ！

じゃあ次は実際に作ってみよう！！

実践例：シンプルなバナー作成手順

ここでは、初心者でも簡単に取り組めるシンプルなバナー作成の手順を紹介します。

ツールを使いながら、基本的なデザインを作成してみましょう。

1. 使用ツールの選択

バナー作成にはCanvaなどの無料デザインツールを使うのはおすすめです。

これらのツールにはテンプレートが豊富に用意されており、初心者でも簡単に操作できます。

他にもバナー作成に使えるデザインツールはさまざまありますが、Adobe Photoshopは特におすすめのツールです。

Photoshopを選ぶメリットは、デザインの自由度と高機能な編集ツールが豊富である点です。

高度な編集機能もあるので、画像の細かい調整やフィルターの適用、影や光沢の追加など

プロフェッショナルな仕上がりに欠かせない高度な編集が可能です。

レイヤー機能

レイヤーを使うことで、テキスト、画像、ボタンなどの要素を個別に編集できるため、

デザインに柔軟性を持たせることができます。

サイズと解像度の自由な調整

Photoshopでは、作成するバナーのサイズや解像度を自由に設定できるので

印刷用の高解像度からウェブ用の最適化まで幅広い用途に対応できます。

多様なフォーマット対応

JPG、PNG、SVGなど、目的に応じて最適な形式でエクスポートできるため、

ウェブや印刷などどんなメディアにも適応可能です。

Photoshopは初心者には少しハードルが高いかもしれませんが、慣れると非常に強力なデザインツールです。

プロのデザイナーが使用するだけでなく、バナー作成においてもその機能を活かして高品質な成果物を作ることができます。

※エクスポート＝データを出力すること

デザイン上級者を目指していくためには必要なツールなんだね！

そうだよ!最初は無料ツールもいいけれどフォトショップなどの有料ツールにも慣れていった方がクオリティの高いデザインが出来るようになるよ！

2. バナーのサイズを決定

バナーサイズは、使用するプラットフォームによって適切なものを選ぶ必要があります。

それぞれのプラットフォームが推奨するサイズに従うことで、表示が最適化され、パフォーマンスが向上します。

以下に、Meta（FacebookやInstagram）とGoogle広告の代表的なバナーサイズを紹介します。

Meta（Facebook・Instagram）

Metaプラットフォームでは、広告としてバナーを表示する際、

フィードやストーリーズなど表示される場所に応じたサイズを選ぶことが大切です。

・Facebookフィード広告

サイズ：1200×628ピクセル（1.91:1のアスペクト比）

注意点：高解像度の画像を使用することで、様々な画面サイズで鮮明に表示されます。

・Instagramフィード広告

サイズ：1080×1080ピクセル（正方形）

注意点：Instagramの正方形フォーマットは、より多くのユーザーに馴染みやすく、視覚的に印象を与えやすいです。

・Instagramストーリーズ広告

サイズ：1080×1920ピクセル（9:16のアスペクト比）

注意点：縦長のストーリーズフォーマットは、スマートフォン全画面に表示され、没入感のある体験を提供します。

Google広告

Google広告（ディスプレイネットワーク）は、多様なサイトやアプリにバナー広告を表示するため、

異なるサイズのバナーが必要です。以下は代表的なサイズです。

・リーダーボード

サイズ：728×90ピクセル

用途：ウェブページ上部に表示される横長バナー。広いスペースを使って、視覚的に目立たせることができます。

・ミディアムレクタングル

サイズ：300×250ピクセル

用途：サイドバーや記事内に埋め込まれることが多く、コンパクトながら視認性が高いです。

・スカイスクレーパー

サイズ：160×600ピクセル

用途：ウェブサイトのサイドに縦長で配置されるバナー。ページスクロール中も目に入りやすい形です。

・ラージレクタングル

サイズ：336×280ピクセル

用途：より大きなスペースでバナーを表示し、目立たせる際に適しています。

このように、目的やプラットフォームに応じたサイズを選ぶことが、バナーの効果を最大限に発揮するポイントです。

それぞれの推奨サイズに従うことで表示が最適化され、より多くのユーザーに訴求できます。

3. テンプレートの選択

無料ツールにはテンプレートが豊富にあるのでそこから選んで作成することが可能です。

ツールにログインしたら、バナーデザインのテンプレートを選びます。

テンプレートを使うことで、フォントやレイアウトの悩みを軽減しデザインをより簡単に進めることができます。

Photoshopを使用する際は、参考デザインをいくつか探すと構成が作りやすいです。

Pinterestなどのサイトがおすすめです！

4. テキストと画像を追加

バナーのイメージに合わせて、テキストや画像を追加します。

次にインパクトのあるキャッチコピーや強調したいメッセージを短くまとめましょう。

画像は、プロダクトの写真や、シンプルな背景を使用して目を引きやすくするのがおすすめです。

5. 配色とフォントの調整

バナーの配色やフォントを調整します。

ブランドカラーに合わせた配色や、読みやすいフォントを選ぶことで、

統一感のあるデザインに仕上がります。

重要な要素はコントラストを強調して目立たせると良いでしょう。

6. CTA（Call to Action）を追加

クリックを促すためのCTAボタンを配置します。

「今すぐ購入」「詳細はこちら」といったアクションを明確に伝えるフレーズを使い、目立つ場所に配置しましょう。

7. 画像を最適化して保存

最後に、作成したバナーを適切なファイル形式で保存します。

JPGやPNG形式が一般的ですが、ページの読み込み速度を考慮して画像を圧縮し、最適化することが大切です。

ファイルサイズが大きくならないよう注意しましょう。

おまけ

まとめ

バナー制作の手順をポイントごとに解説してみました！

私は一つのバナー作成に何時間もかかっていましたが、

クオリティは先輩のデザイナーさんが作成したものには到底及ばない内容でした。

少しづつですが、数をこなしていくことで自分の型が出来てくると思います。

最初は特にバナーの作成には膨大な時間がかかりますが、

あきらめずに作り続けることで、よりクオリティの高いバナーを短い時間で作成することが出来るように必ずなります！

挑戦を楽しんで、素敵なバナーを完成させましょう！

The post 【初心者向け！】売れるバナーの作成方法7ステップを解説！【未経験デザイナー奮闘記】 first appeared on 株式会社六次元（ROKUJIGEN）｜デジタルマーケティング.

いざコーディングを始めると、「Flexbox」というレイアウト手法を使うことが多くなると思いますが、

どの様に使っていくのか悩んでしまいますよね。

Flexboxを使いこなしたいのなら、まずはその基本となるFlexboxのプロパティを理解しましょう。

私も実際コーディングの勉強を始めた時はこのFlexboxを理解することで、

WEBサイトに必要なコーディングがスムーズに出来るようになりました。

本記事ではFlexboxのプロパティや、実際に使っていく上での注意点について詳しく説明していきます。

Flexboxとは？基本的な使い方を紹介

Flexbox（Flexible Box Layout）は、WEBサイトのレイアウトを効率的に作成するためのCSSです。

Flexboxを使用すると、複雑な配置やサイズ調整をシンプルで柔軟に出来ます。

今までのレイアウト方法では、横並びにする要素の高さを揃える際に、多くのCSSプロパティを組み合わせる必要がありました。

しかし、Flexboxでは、要素の配置、サイズ変更、並び順などを簡単に制御でき、レスポンシブデザインを再現出来ます！

Flexboxの最大の利点は、コンテナの中の要素が、簡単にきれいに並ぶように調整できることにあります。

例えば、Flexboxを使うと、コンテナ内の要素を均等に配置したり、中央に寄せたり、間隔を空けたりすることがとても簡単にできるようになるのです。

これにより、手間をかけずに整ったレイアウトを作ることが出来ます。

よく使う！Flexboxのプロパティ一覧

Flexboxには、よく使うプロパティがあります。

プロパティとは「適用するCSSのスタイルの種類」です。

その中でも特に重要なものを紹介しましょう。

（※今回は要素のサイズ調整に関しては省いています。）

◆flex-direction

要素がどの方向に並ぶかを決めるプロパティです。要素を横一列に並べたり、縦に並べたりできます。

◆flex-wrap: 要素を一行、複数行に並べるプロパティです。

コンテナに収まりきらないときに、 折り返して次の行に並べるかどうかを指定できます。

◆justify-content：要素を水平方向にどのように配置するかを決めるプロパティです。

親要素に空きスペースがある場合に左右、中央、均等に配置が出来ます。

◆align-items: 要素を垂直方向にどのように配置するかを決めます。

上下の位置を揃えるために使います。

◆align-content：要素を複数行に渡るアイテムの垂直方向の間隔を決めるプロパティです。

アイテムが複数行に折り返されたときに使います。

これらのプロパティを使うことでウェブページの要素を自由に配置することが出来ます。

この中でもjustify-contentは特に重要なプロパティなので次の章で詳しく解説していきます！

Flexboxの横並びのプロパティ「justify-content」

ヘッダーの作成にも使用されるプロパティjustify-contentについて詳しく見ていきましょう。

justify-contentは、要素を水平方向にどのように配置するかを決めるプロパティです。

左揃え、右揃え、中央揃え、均等に配置することができます。

どのような値と効果があるのか紹介していきます。

◇flex-start（デフォルト）: 要素が左揃えになります。

最初のアイテムが左端に配置され、他の要素がその後に続きます。

◇flex-end: 要素が右揃えになります。

最後のアイテムが右端に配置され、それ以外の要素がその前に並びます。

◇center: 要素が中央揃えになります。

全ての要素がコンテナの中央に集まります。

◇space-between: 最初の要素が左端、最後の要素が右端に配置され残りのスペースが均等に分配されます。

◇space-around: 各要素の周りに均等なスペースが作られます。

要素の前後に等しい余白が設定されます。

「justify-content」の用途と使い方

justify-contentを利用すれば、サイトのヘッダーにある

ナビゲーションメニューをきれいに整理することができます。

メニューアイテムを画面の幅いっぱいに均等に配置したいときは、

こちらをサイトのヘッダーでメニューやロゴをきれいに配置するのに役立ちます。

ヘッダー内のメニューアイテムを中央に揃えたいときには、

上記コードを使います。

ロゴを左に、メニューを右に配置したいときは、

こちらを使うことで、左右に均等に配置できます。

このように、justify-contentは、ヘッダーをすっきりと整えるのに非常に便利なプロパティです。

Flexboxの強みを最大限に活かしたレイアウトが可能になります。

これをマスターすれば、レイアウトの自由度がぐっと広がりますよ！

実際にコードも交えて詳しく解説します。

justify-contentを活用した実用例

次のTOPページのデザインを実際にコーディングしていきましょう！

ファイル構成はこのようにしました。

HTMLとCSSを解説していきましょう！

HTML

CSS

ヘッダー部分に「navigation」というクラス名をつけています。

「navigation」にjustify-content: space-between; をつけているので

ロゴとナビゲーション部分が均等配置になります。

更に「menu」にjustify-content: space-between;を付けているので

右寄せの状態で均等配置になります。

（※テキストの間隔はpaddingで調節しています。）

Flexboxのよくある注意点

Flexboxを使う上でいくつか注意点があります。

注意点1. 古いブラウザへの対応

古いブラウザでは、Flexboxがサポートされていない場合があります。

できるだけ最新のブラウザを使用するか、ブラウザ互換性を確認しましょう。

注意点2. 複雑なレイアウトには不向き

Flexboxはシンプルな一方向のレイアウトに最適ですが、

複雑な二次元レイアウトにはCSS Gridの方が適しています。

※CSS Gridに関してはまた今度解説します！

注意点3. 親子関係に注意

Flexboxのプロパティは、親要素と子要素の関係に基づいて動作します。

親要素にdisplay: flex;を指定しないと、子要素にFlexboxの影響はありません。

ちなみに私は、、

よく親要素にdisplay:flex;を指定することを忘れて一人で焦っています（笑）

まとめ

このようにFlexboxを活用することで、レイアウト作成を効率よく行えます。

プロパティの種類が多いのですべてを完璧に使いこなすのは難しいですが、

Flexboxを理解し使いこなせるようになれば、コーディングスキルが上がることは間違いないです！

レイアウト作りがスムーズに行えるようにがんばりましょう！

最後までご覧頂きありがとうございます。

私と同じように未経験でIT業界に転職された方、コーディングの勉強をし始めた方の

ヒントになればと思いこのテーマで記事を書きました。

The post 【ゼロから始める】Flexboxの基本と実用例【未経験デザイナー奮闘記】 first appeared on 株式会社六次元（ROKUJIGEN）｜デジタルマーケティング.

Webサイト上で広告やコンテンツを表示するための画像のことを「バナー」といいますが、

私は日頃、このバナーデザインの作成をしています。

いきなりですが質問です！！

AとBどちらのバナーが「見やすいな」「きれいだな」と感じますか？

おそらく多くの方がＢの方が良いと感じたのではないでしょうか？

このバナーは元々正方形だったものを長方形に作り変えており、このサイズを変える作業をリサイズといいます。

デザイナー未経験で入社した私にとって難しかったのはこのバナーのリサイズです。

最初は何度も失敗し（今も失敗の連続です…笑）どのようにリサイズすれば良いのか悩むことが多かったです。

この記事ではバナーリサイズの基本知識から私が実際に直面した難しさと考え方についてお伝えします。

デザイン初心者の方や、バナーのリサイズが難しく感じている方は必見です！

ぜひ最後まで見て行ってください。

デザインの基本「リサイズ」はなぜ必要なのか？

そもそも、なぜリサイズの作業が必要なのでしょうか？

バナーのリサイズは、異なるデバイスや広告スペースに対応するために必要不可欠です。

具体的にはスマートフォン、タブレット、デスクトップなどの多様な画面サイズや解像度に対応し

同じコンテンツを最適に表示するためにリサイズという調整が必要なのです。

バナーのリサイズは広告運用を効果的に行う上で欠かせない作業となります！

主なバナーサイズの種類

バナー広告にはさまざまなサイズがあります。

私がよくリサイズするバナーサイズは特にSNSで使われるものが多く以下のようなものです。

バナーサイズ①1080×1080ピクセル

主にソーシャルメディアの広告に使われるバナーサイズです。

この正方形サイズは視覚的にバランスが取れており、スマホやiPhone、タブレットでの表示に最適です。

バナーサイズ②1200×628ピクセル

主にFacebook広告に使われるバナーサイズです。

このサイズは横長のレイアウトでテキストやコールトゥアクション（CTA）を含めたデザインに適しています。

※CTA＝バナーに設置されたイメージやテキストのこと

バナーサイズ③1080×1920ピクセル

主にストーリーズ広告に使われるバナーサイズです。

この縦長のサイズも1080×1080ピクセルと同じでスマホやiPhone、タブレットの全画面表示に最適でインパクトのあるビジュアル表現が可能です。

バナーリサイズの注意点

サイズ概要を理解したところでバナーの作成時には気を付けるべき点が7つあります。

ツールの選択

リサイズにはPhotoshopやIllustrator、オンラインツールなどを使用します。
各ツールの利点と使いやすさを考慮して選びましょう。私はPhotoshopを使用することが多いです。

デザイン初心者の私の失敗談

ここで！

私が入社したての頃、対応させて頂いたリサイズ作業での失敗談を聞いてください、、、

もともとは、1080×1080ピクセルの正方形バナーを1080×1920ピクセルの縦長バナーにリサイズしたのですが・・・

といったリサイズの難しさを痛感し、結果としてリサイズ後のバナーは視認性が悪い、本来伝えたい情報が伝わりにくいものになってしまったのです。

確認を頂いた先輩のデザイナーさんにも

「作業工数削減の為にリサイズをお願いしているのに、私（先輩）の調整で時間がかかってしまうと、結局作業工数が増えているのと変わらないです」

と厳しいお言葉を頂きました。

まとめ

この経験からアスペクト比の変更には細心の注意が必要であること、全体の俯瞰が大切という事を学びました。

特に正方形から縦長へのリサイズは難しいため、比率を保つためにはデザイン全体を見直す必要があります。

こういった点に気を付けながらリサイズをしていかなければなりません。

結果的に工数の削減と、品質を維持するためには、これらの細かな意識がとても大切であると知ることが出来ました。

その後のプロジェクトでは、これらのポイントを念頭に置きながらリサイズ作業を進めることで

より効果的なバナーを作成できるように意識しています！

最後までご覧頂きありがとうございます。

私と同じように未経験でIT業界に転職された方、バナーのリサイズに苦手意識を持っている方に

少しでもヒントになるようなことを伝えたくて今回この記事を書きました。

迷っている方の背中を押せたら嬉しいです。

The post 【初心者必見】バナーリサイズの基本と注意点【未経験デザイナー奮闘記】 first appeared on 株式会社六次元（ROKUJIGEN）｜デジタルマーケティング.

現在運用している企業ブログはあるが、全く読まれない！

という声は多くのクライアントで耳にします。

ただ適当に企業のサービス内容を紹介したり、日記のような記事を書いたりしても

アクセスは増えないし、お問い合わせにもつながりません。

「読まれるブログ記事」はどのように作ればいいのか？

この記事では、アクセスに伸び悩んでいる企業ブログ記事作成の10ステップについて紹介していきます。

読まれる企業ブログStep①ナレッジ・ノウハウの洗い出し

ただ企業のサービスを紹介するような記事を作るだけではアクセスは増えません。

ユーザーが抱える悩みを解決できるような記事にする必要があります。

そのため、あなた自身や企業がどんなサービス、知識、知見、体験を持っているかを洗い出しましょう。

これはあまり考えずとにかく量を出してしまっていいです。

情報のはき出しは、紙に書きだすアナログな方法をお勧めします。

デジタル上で平面にテキストを打っていくと、アイデアの広がりが抑えられることがあります。

紙の中央にテーマを書いて、ツリー上に枝分けさせていくこのやり方がおすすめです。↓

※基本自分のやりやすい形でいいと思います

読まれる企業ブログStep②ターゲットの明確化

ステップ①でノウハウを洗い出したら、誰に届ける記事を作成するのかを考えます。

企業の経営者なのか、採用担当者なのか、フリーランスなのか、入社志望者なのか、どの業態の企業なのか

このターゲットの明確化をしっかりと行っていないと、無駄な記事を量産し続けることになります。

ターゲットを明確化することで、これから考える記事の内容も固まりますし、記事に訪れた人にどういうアクションを起こしてほしいかもはっきりとさせることができます。

非常に重要なステップなので、必ずやっておきましょう。

読まれる企業ブログStep③記事内容の選定

①のステップで洗い出したナレッジ・ノウハウのうち、実際に記事に起こす内容を絞っていきます。

②のステップでターゲットを明確にしたので、それに沿ってベストなナレッジを選択しましょう。

ただ、実際に記事として形にしていく段階で、「妙な書きづらさ」が出てくる内容になってしまうことがあります。

それは選定した内容の中に、ユーザーにとってわかりやすくなるような「具体例がないとき」に起こりがちです。

その具体例の説得力を出するために「画像や資料、グラフ等」といった、テキスト以外に準備が必要なものが出てきた場合、手が止まることがあります。

記事として起こす内容を選定する前に、記事として完成させるための実現性があるかどうかは確認しておきましょう。

読まれる企業ブログStep④記事の骨組みを整える

③のステップで記事に起こす内容が決まったら、その骨組みを作っていきましょう。

骨組みとは「見出し・構成」のことです。

例として以下のような形です。

と、最低5つ程度の大見出しで構成が出来れば、バランスとしては綺麗な記事に仕上がります。

これが3つ程度の見出し程度の文量の記事になると極端に短く感じますし、

逆に3つの章で長い文量の内容を入れる場合は、章の中に重要ポイントがいくつも出てきてかなり見づらい記事になってしまいます。

記事の内容の中で、どのポイントとどのポイントを見出しとして設定するか、ユーザーの見やすさを意識して章の分け方を考えてみましょう。

読まれる企業ブログStep⑤記事の肉付け

④のステップで各内容の骨組みが出来たら、記事としての形を作っていきます。

これまで作成したテキストは、箇条書きだったり、殴り書きだったり

無機質で記事として投稿する際の文章にはなっていないはずです。

記事として書き起こす際に不自然にならないような流れ、接続詞は意識しましょう。

また、伝えやすさを意識して具体例や数字、資料などの明確な情報があると、なお良いです。

画像や資料を入れる想定の記事であれば、その前提に沿ってテキストを作っていきましょう。

そして見落としがちなのは画像のサイズ。

画像サイズはどんどんサイトの動作を圧迫し、重たい画像を入れてしまうと、記事だけでなくサイト全体も重くなっていってしまいます。

そうなるとGoogleの検索順位にも影響が出て、総じてアクセス数が減る要因にもなりかねません。

フリーの画像圧縮ツールはたくさんあるので、それらを使用して少しでも画像サイズを小さくして挙げた方が、ユーザビリティにもつながります。

注目ポイント

要所で画像を入れるのはユーザーの離脱率の低下につながります。

入れすぎで見づらくなるのは問題ですが、適切な画像を入れてユーザーが飽きないような記事を作りましょう。

読まれる企業ブログStep⑥ブログツール・ワードプレスに落とし込み

出来上がった記事のテキストをブログツール・ワードプレスに入れ込んでいきましょう。

用意した画像の差し込みやテキストの色変更もこの時に行っていきます。

使用しているツールによって記事装飾の仕方は大きく違ってくるのでここでは割愛します。

一般的に広く使われているワードプレスでも、使用するテーマによって使用感が全く異なってきます。

初めて使用する際は少し手間取ってしまうでしょうが、特に重要なのは次のポイントです。

テキストの装飾はとにかくシンプルに。

こちらの記事でも、黄色のアンダーラインと赤文字以外は装飾を使っていません。

カラフルになりすぎると見づらさを感じますし、赤文字だけだと、それはそれで不格好です。

注目ポイントが同じ章の中でいくつもある場合などは、この記事のように、アンダーラインと赤文字程度の2種の強調装飾があると良いです。

また、ブログ記事は「改行」による見やすさも意識してください。

ずっと同一の文章でだらだらと長くしてしまうと、かなり窮屈で見づらさを感じます。

とはいえ、一小節ごとで改行するといった極端な改行もNGです。

自分がいちユーザーとしてその記事を見たときに、見やすく感じるかどうかを常に考えながらテキストを入れていきましょう。

読まれる企業ブログStep⑦タイトルの設定

タイトルはメチャクチャ重要です。

Googleにどう認識されるか、ユーザーにどう認識されるか、そのどちらも意識したうえで設定する必要があります。

タイトルはクリックされやすい、読まれやすいタイトルにする必要があり、検索数の多いキーワードを入れ込みましょう。

どのようなキーワードでよく検索が行われているのかを調べるには、

ラッコキーワードやキーワードプランナーを活用するのがオススメです。

特にラッコキーワード（https://related-keywords.com/）は、無料で検索キーワードのサジェスト一覧を調べることができ、

どんなタイトルにしたらよいのかという、一つの判断材料になります。

検索ボリュームを調べられるのは有料プランになるので、そこは予算に合わせて検討しましょう。

そして、タイトルの文字数としては40文字程度以内が良いとされています。

長すぎると検索画面で表示されたときに全文が表示されません。

そして重要なキーワードほどタイトルの前の方に入れるのも意識しておきましょう。

読まれる企業ブログStep⑧サムネイル作成

ブログ記事に関しては、そこまでサムネイルは重要視するポイントでもないかもしれませんが、

サイト内の統一感を意識したい場合などは、テーマに沿ったサムネイルで一貫させると良いかと思います。

参考になるのはアナグラム株式会社（https://anagrams.jp/blog/listing_new/）の統一感のあるサムネです。

サムネイルの作成はCanva（キャンバ）といった無料ツールでもクオリティの高いサムネイルをテンプレートから作ることができます。

サムネイルのキーワードはそこまで意識しなくていいですが、

文字が見やすいようにインパクトがあればいいでしょう。

読まれる企業ブログStep⑨最終チェック

公開状態にする前に、下書きのままプレビューでの確認をしましょう。

こういったポイントを確認しておきましょう。

良くあるのが「画像のズレ」です。

中央寄せにしたはずの画像がずれていたり、テキストが詰まっていて見づらく感じたり。

こういったところの確認も重要です。

読まれる企業ブログStep⑩アクセス解析

ここまではブログ記事を作成していく上での中身に関する事ばかりでしたが、

特にこの10ステップ目は極めて重要です。

ブログ記事は投稿して終わりではなく、そのあとも解析・改善が必要不可欠です。

Google Analyticsのようなアクセス解析ツールで数値を分析することはメチャクチャ重要で、

どのページにどのくらいアクセスが来ていて、

どのくらいのユーザーが離脱しているのか、

そしてどこからユーザーが流れてきているのか、

こういった視点をもってブログ記事を解析できれば、よりよい企業ブログが出来上がるでしょう。

ブログ記事を書いてはアクセス数をチェックしてみる。

たまに挑戦的な記事を書いては、普段とどれくらいアクセスが変わるのか検証してみる。

さらにタイトルを変えてみてはどうか？

キーワード意識してみたらどうか？

あの手この手でブログ記事の展開の仕方を、無限大に検証できるのがアクセス解析ツールです。

これは必ずやるべきステップなので、（全ステップ大事ですが・・・）しっかりと心にとどめておきましょう。

読まれる企業ブログ記事の作成方法まとめ

この記事では企業ブログが伸び悩んでいる、これからブログを始めようとしている方に向けた、

ブログ作成のステップを10に分けて紹介していきました。

最初が特に大変に感じますが、慣れてしまえばスムーズに作っていけるかと思います。

本来は記事全体、大見出しに「検索されやすそうなキーワード」をちりばめるのがベストですが

慣れないうちはまず完成を目指しましょう。

ブログ記事は最初のハードルが高く、そのあとも投稿が滞りがちになります。

質も大事ですが、まずは量！

しっかりと数をこなしていけば、よりクオリティの高い記事を作っていけます。

今回の記事が、ブログ記事からの企業サイトアクセス増、問い合わせ増につながれば幸いです。

The post 【超簡単】読まれる企業ブログの作り方「10ステップ」を徹底解説！ first appeared on 株式会社六次元（ROKUJIGEN）｜デジタルマーケティング.