Blogブログ

記事一覧

カテゴリー:ブログ

  • ブログ

Gitを使ってコーディングデータのバージョンを管理しよう!

チームでコーディングする際、どうやってバージョン管理をしていますか?
ホームページを作る際、Aのページは○○が担当、Bのページは▲▲が担当。
みたいなシチュエーションはたくさんあると思います。

その際に思い浮かぶのがMacだとAirdrop、WindowsPCとの共同であれば、
googleドライブ、One Driveなどのクラウドストレージ。
もしくは古いものだとHDDやSDカードなど・・・。

こういったデータの受け渡しをする場合、Aのページを更新していたのを知らずに、
▲▲がAのページを上書きしてしまいバージョンがぐちゃぐちゃになる・・・、なんて事故を
見かけた事がある人は少なくはないと思います。

そういった事故を未然に防ぐためにおすすめなのがバージョン管理ソフトです。
弊社でもGitHubを使用しています。

今回はGitHubを使っていて便利になった!と思う点を紹介していきます。

1.データ共有が簡単になった

前述した通り、データの上書き事故や間違えて旧バージョンを所持したままアップロードしてしまうなどの怖い事故が未然に防げるようになりました。
項目2でもお話しますが、誰がどのようなデータを更新しているかが一目で分かるので、そういったストレスから解放されるのは些細ながらも大きいです。

2.バージョン管理が分かりやすくなる

「誰がどのタイミングで何を更新したか」というものをリスト化してくれているので、
簡単に過去の作業を振り返ることが可能です。
また、同時にデータを更新しようとすると競合しているという旨のメッセージが表示されるので、
同データを触っていた際の事故も格段に減りました。

3.豊富な知見

GitHub限定とはなってしまいますが、バージョン管理と言えばというくらいGitHubは有名で、
エンジニア、コーダーに広く使われているので分からない事があっても調べれば比較的なんでも出てくるのが強みだと思います。

コミットやマージなどカタカナ言葉が多く取っ付きづらい!と思う方も多々いるかと思いますが、
いざ触ってみると意外と何でもなくて、それよりも得られるメリットの方が大きいと感じます。
新しいものを導入することは勇気がいることですが一度ご検討頂いてみてはどうでしょうか?

  • デザイン
  • ブログ

Photoshopの小技(スタンプツール編)

本日はスタンプツールにて対象のものを増やしたり消したりする小技を紹介していこうと思います!
まずはサンプルとなる画像を用意します。

↓サンプル画像

対象のものを消したいとき

フォトショップを起動して該当する素材を選択後、

コピースタンプツールを選択します。
コピーしたい部分をOption+クリックで選択選択後に消したいところをなぞっていきます。

対象のものに全て塗り終えると・・・

画像のように一羽消すことができます。

次は対象のものを増やしたい場合

コピースタンプツールというのは対象のものを量産することもできます。

コピースタンプツールをクリックしたあと、画面の上に「調整あり」というのがあります。
四角の中のチェックを外します。
OptionまたはAltキーを押しながらコピーした場所が移動することなく固定できます。
チェックマークがついてると、コピーした場所は自分がカーソルを動かすと共に動いてしまうのです。
設定方法ができたら増やします。
方法は先ほどと同じoption+クリックをします。
これでコピーが完了です!

コピーした場所は移動しないので、どんなに自分がカーソルを動かしていろんなところを塗っても鳥が出てきます。
今回は鳥を増やしたいので鳥をスタンプ!

試しに量産してみました!

その他の調整

その時々でブラシの調整をします。

コピーしたあとに塗っていく作業で使うブラシの直径と硬さを変えることができます。
直径は、ブラシの大きさ(太さ)のことです。
硬さは低いとブラシの周りがほわっとして、硬くするとくっきりしたブラシになります。
また、不透明度や流動で他の設定も可能です。

サンプルについて

コピースタンプツールを使う時のサンプル(コピーする場所)を3つの中から選ぶことができ、特徴があります。

◆現在のレイヤー:レイヤーを増やさずにコピースタンプツールを使う場合
◆現在のレイヤー以下:レイヤーを増やしてコピースタンプツールを使う場合
◆全てのレイヤー:レイヤーを増やしてコピースタンプツールを使う場合
 
写真と同じレイヤーにコピースタンプツールを使う場合は、現在のレイヤーを使います。
あとで直すことを考えると新しいレイヤーを増やしてコピースタンプツールを使った方が効率が良いです。

修正する可能性がある場合は、『現在のレイヤー以下』または『全てのレイヤー』にチェックを入れてから作業を進めましょう!

まとめ

今回はコピースタンプツールは増やしたり消したりをできます。
ツールを使いこなすことで様々な対応ができます!

ぜひ参考にしてみてください♪

Webデザインの余白
  • ブログ

Webサイトをデザインする際の余白について

Webに限らず、デザインを作る際はコンテンツ間の余白を意識して作ると思います。
デザインする際の余白の取り方によっては、サイトの持つイメージが大きく変わってきます。
そこで今回はより良いデザインを作るための余白についてまとめていきます。

なぜ余白が必要か

・内容をできるだけ理解しやすくするため
・特定の要素を強調し、読み手に注目してもらう
写真やボタンなどに余白を入れるほどそのコンテンツが強調される効果があります。
特にCTAボタンは周囲に余白を入れるとコンバージョン率が上がると言われています。

セクション間の余白

下の画像を見ていただくとわかるように余白があるとセクションごとのまとまりが強調され、
情報と情報の間隔が広がれば、別のコンテンツであるということが分かりやすくなります!
間隔の大きさは大体約60〜100pxくらいが多く、余白が多いサイトとなると120〜140pxほどの間隔で作られるサイトも見られます。
セクション間の余白

余白が多いサイト

余白が多いサイトは化粧品やジュエリー、アクセサリーサイトなどが多く、シンプル・高級感・洗練されているというイメージを持ちます。
最近は情報量が多くても余白を意識したすっきりとしたサイトも多いので、流行りの傾向もあるかと思います。
DEAREST
余白が多いWebサイト

余白が少ないサイト

余白が少ないサイトはWebマガジンのサイトや通販サイトに多く見られます。情報を多く入れられるので活気があるイメージを持ちます。
北欧、暮らしの道具店
余白が少ないWebサイト

  • ブログ

WordPressを導入して簡単HP運用!

本日はホームページをhtmlなどの知識がなくても管理できるようにするCMS
WordPress」についてご紹介いたします。

CMSとは?

コンテンツ管理システムと言われるもので、アメブロなどのようにページ制作のノウハウなどが無くても自分である程度の更新をできるようにするシステムのことを指します。

既存のブログサイトのような決まった形ではなく、自分の理想により近いブログを作れたり、
ホームページを丸々1つ作ることもできてしまいます。
通常ではホームページを変更する場合、ホームページを制作した会社に修正の依頼をするケースが多いですが、CMSを導入しておけば導入された箇所を自由に変更することができます。

どういった人が対象?

ホームページを運用するにあたって更新する時CMSが入っていない場合はホームページ管理会社へ修正依頼を出し、見積もりをしてもらい修正。
というのがよくある流れかと思います。
その場合もちろん修正費用が発生しますし、すぐに更新したいのに!というもどかしさを抱くことになります。

そんなあなたがまさに対象です!
CMSを導入すると管理画面にログインするだけで誰でも簡単にホームページの修正ができてしまします。

でもお高いんでしょう?

通常のCMSを導入をするホームページと比べるとどうしても費用はかかってしまいます!
ただ、弊社ではお打ち合わせの段階でどこの修正は自分でしたいかなどしっかりお聞かせいただきます。
その際に一部のみCMS化することでお安くすることができるなどの提案も都度させていただいています。

ご新規の作成だけでなかホームページをリニューアルしたい!というご依頼も承っていますのでお気軽にお問い合わせください!

  • ブログ

無料で簡単にロゴを作成できる便利なサービス

ビジネスのブランディングにおいて重要な要素であるロゴ。ここでは無料で簡単にロゴを作成することができるサービスを2つご紹介します。いずれもユーザー登録不要、商用利用OK、誰でもすぐ使えます。

LOGO MAKER

ロゴのテキストを入力してフォントやカラー、アイコンを選択するだけで簡単にロゴを作成することができます。ダウンロードするサイズも選べて便利です。
ロゴメーカーホーム
LOGO MAKER

1.ロゴのテキストを入力します
2.フォント、文字の太さ、カラーを選択します。
3.お好みでアイコンを選択し好きな場所に配置します。アイコンのカラーやサイズは任意に設定できます。
画面右側のプレビュー画面でPCやスマホの表示、名詞や紙袋に印刷した際の表示を確認することができます。
ロゴメーカー2

4.完成させるボタンをクリックし、保存形式とサイズを選択して保存します。
ロゴメーカー3

Hatchful

ロゴのテキストを入力していくつかの質問に答えるだけで数十個のロゴを提案してくれます。
Hatchfulホーム
Hatchful

1.ビジネスの業界を選択する
Hatchful2

2.デザインのスタイルを選択する
Hatchful3

3.ビジネス名を追加する
Hatchful4

4.ロゴをどこで使用するか選択する(複数選択可)
Hatchful5

5.ロゴを選択する
Hatchful6

こだわりのオリジナルデザインをプロに依頼するなら

「こだわり」や「熱い想い」「ビジョン」のこもったオリジナルのロゴをプロに制作して欲しい、というお客様にはエクスフィールドが時間が経っても⾊あせず、⻑期的にご使⽤いただけるロゴの提案をさせて頂きます。お気軽にお問い合わせください。ぜひロゴ制作のページもご覧ください。

デザイン基礎知識
  • ブログ

WEBデザインの基礎知識

本日は新人Webデザイナー向けにデザインの基礎知識をご紹介したいと思います。

デザインは「目的を達成するための手段」であるというように、ただおしゃれだったり綺麗なだけだと、残念ながら、集客を上げるなどの目的を達成することはできません。
今回紹介する基礎知識はデザイナーにとって当たり前に理解できているようで、新人の方は実践に移すと忘れがちになることが多いかと思うため、復習がてら読んでいただけると幸いです。

デザインの4原則

これから紹介する4原則はレイアウトの基本原則とも呼ばれ、デザイナーでない方でも情報を整理する際に役に立ちます。

①近接
要素と要素の間隔を「まとめる」ことで情報を読み取りやすくします。
関連する情報同士をグループ化することで直感的に情報の構成を理解できるようにします。
情報がグループ化されていれば読んでもらう可能性が高くなり、覚えてもらう可能性も高くなります。
グループ化する際に、関連するものとそうでないものの「余白」に差をつけることが近接のポイントとなります。
②整列
デザインの要素の位置や大きさ、色を「そろえる」ことで、バラバラに羅列された情報が一気に見やすくなります。整列は「中央揃え」「左揃え」「右揃え」に分けられますが、どのように見せたいか目的によって使い分けると良いでしょう。整列を使用すると透明の見えない線が生まれ、「左揃え」や「右揃え」にすると見えない線がより強く見えるようになります。
一般的に日本語は左から読むため、日本語の文章の可読性を上げたいなら「左揃え」にするのがベターだと言われています。
③反復
デザイン上のある特徴、フォントや色、配置など作品上で「くり返す」という法則です。
ある特徴というのはフォント、色、罫線、フォーマット、アイコンなど様々な要素です。
要素をくり返し使うことで「一貫性」が生まれ作品に統一感が生まれます。
統一感が生まれることで視線がコントロールされ、ユーザーの目がさらに惹きつけられます。
④コントラスト
コントラストは2つの要素が異なる場合に「メリハリをつける」ことで情報を差別化させることです。
上で紹介した「近接」や「整列」と違い、あえて差別化させることでユーザーの目を惹きつけてコントラストをつけます。
コントラストをつける際は、思いきりよくサイズや色を変えてわかりやすく差をつけることがポイントです。

使用する色について

RGBカラー
Webサイトはパソコンやスマホなどのディスプレイで閲覧されるので、RGBを使ってデザインします。光の三原色であるRGBは、「レッド」「グリーン」「ブルー」の3色で構成されており、色を混ぜ合わせるほど明るい色になり白に近づいていきます。
CMYKカラー
印刷物の色を表現する際は、CMYKを使います。
「シアン」「マゼンタ」「イエロー」「キープレート」(ブラック)で構成されており、RGBとは逆で混ぜ合わせるほど暗い色になります。

印刷物を入稿する際にRGBからCMYKに変換することがありますが、CMYKをRGBに変換すると通常のRGBに比べ、くすんだ色になってしまうので注意が必要です。

  • デザイン
  • ブログ

レイアウトの構成

本日はレイアウトについてお話ししたいと思います。
人は誘導されているものに従って目線を無意識に動かしています。
デザイナーは制作前の構成を考えてデザインすることが大切です💡

情報整理

まずは情報整理が必要です。

サイトを作成する際に
ロゴ・写真・タイトル・文章など様々な要素をつなぎ合わせていくと思いますがこの時に要素の中で優先順位を決めいていくことがとても大切です。

もちろん、サイトによって優先順位は異なるのでクライアントとの打ち合わせの際に何を一番ユーザーに目を止めて欲しいのかを理解しておくことが必要です。

情報整理の次に関係性を整理します。

例えば、キャッチコピーの下にロゴを配置すると、ユーザーにはしっかりと伝えることができません。
この場合、基本的にはコピーの下には説明文などが必要かと思われます。

優先順位と関係性を整理したら大まかな、まとまりが見えてくるはずです。
ノートに書き出すことで後に見返したり、頭の中で整理しやすくなります。

視線誘導

情報整理ができたら視線誘導を意識しながら
ワイヤーフレームを作成していきます。

こちらはインターネットで検索したらすぐにヒットするものも多いかと思われますが
・Zの法則
・Fの法則
・Nの法則
など人間の目線誘導を意識した情報が既に存在しております!
一度調べてみてください。

Zの法則で言うと
人間が左から右に流れる性質を利用しているレイアウト方法です。
知識として知っておくと頭でイメージしやすいので調べてみてください。

余白でグルーピング

ホームページをデザインする際に要素ごとに余白が違っていると思います。
これは余白を生かして情報整理されているから見やすくなっているのです。

例えば、キャッチコピーの下にテキストを置きますが
この時にコピーとテキストがスクロールするほど離れていると
結びつきがないと感じてしまい、結果何が伝えたいの分からなくなってしまいます。

できるだけ要素同士は近くに
セクションが違えば余白は開けることを意識しましょう!

まとめ

情報整理はデザインをする上でとても大切な作業です。
ここをおろそかにしてしまうとデザインの作成に時間を取られたり
ユーザーに離脱率がグッと下がってしまいます。

様々なサイトを見てどのように配置されているのかを見て、今後デザインを制作する際に
意識してみましょう!

webdesigner
  • デザイン
  • ブログ

Web制作の効率化!Google Chrome拡張機能

こんにちは!エクスフィールドの新人Webデザイナーです!
本日はWEB制作をする上で、入れておくと作業の効率が圧倒的に良くなるGoogleChromeの拡張機能を3つご紹介いたします。

Page Ruler Redux

webページに表示されている画像やセクションや要素などの高さや幅、マージンなどをピクセル単位で測ることができます。
PageRulerRedux
使い方は簡単です。Chromeの画面右上に表示されているPage Ruler Reduxのアイコンをクリックすると、マウスカーソルが大きな「+」に変わり、画面上部に数値を表示するバーが表示されるます。マウスカーソルをブラウザの画面上で測定したい位置の視点で一度クリックし、そのまま測定位置の終点までドラッグしてください。

ColorZilla

Webサイトデザインをする際、ヘッダーの色使いを真似したい、この要素の色は何色だろう?など、そんな時に便利な色取得ツール「ColorZilla」を紹介します。
colorzilla
使い方はChromeの画面右上にあるスポイトマークのアイコンから、「Pick Color From Page」をクリックします。
するとカーソルが出てくるのでページ上で取得したい色をクリックします。取得した色は自動的にクリップボードにコピーされます。

CSS Peeper

「CSS Pepper」はWebサイト内の要素をクリックするだけで、色や幅や高さ、padding、margin、font-familyなどを一発で調べられる拡張機能です。
Page Ruler Reduxと似ていますが、CSS Pepperの方が一発で様々な情報を取得できます。
CSS Pepper
使い方はChromeの画面右上にある「P」のマークをクリックします。すると、すぐにCSS Pepperがサイトを解析して、OGP画像(SNSでシェアされる時の画像)、タイトル、bodyに設定されているfont-familyをパネルで表示してくれます。
表示されているパネルの下にある「水玉」のアイコンをクリックすることで、表示されているページに使用されている全ての色のカラーコードが表示されます。
また、要素の余白やフォントを調べる際には、起動している状態で、特定の要素をクリックします。
するとパネルに、要素のサイズや余白、フォントサイズ、要素の文字色などクリックした要素の情報が表示されます。

  • ブログ

ショートカットキーで効率良く

本日は作業の効率を上げるショートカットキーをご紹介します。
WebデザイナーはデザインをするときにAdobe製品のフォトショップかイラストレーターを使用することが多いかと思います。

フォトショップのショートカットキー

こちら、Adobe公式のサイトに掲載されいてフォトショップのショートカットキーリストです。

(引用元:Adobe公式サイト)
URL:https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html
こちらからダウンロードができるのでまだ覚えてない方はデスクにおいて覚えましょう!
こんなにもたくさんありますが・・・全てを覚えるよりも使用頻度の多いものを覚えておくことが大切です。

ショートカットキーのカスタマイズ設定方法

上記で紹介したものは初期設定のショートカットキーです
自分でもカスタマイズできるので変更したい方は設定してみましょう!

〈フォトショップカスタマイズ設定方法〉
❶編集 > キーボードショートカットとメニュー」を選択
❷設定ページが開くので変更したい箇所の動作を探して設定します
これでOK!
ぜひ試してみてください!

なぜショートカットキーを使用するのか

ショートカットキーを使用することでマウスで作業するよりも作業時間を短縮することができます。
作業時間を短縮することで他の作業ができたり、デザインを考える時間も増やすことができます!
もちろんデザインソフト以外にもエクセルや他の作業にも同じことが言えます。

この記事を活かしてぜひ効率よく作業してみてください!

Contact

猫と本棚

エクスフィールドへのお問い合わせ。

ホームページやポスター、LINEスタンプ等々何かを作りたいけどなかなか作れずに困っている皆様。
エクスフィールドに相談してみませんか?ご相談は無料ですので、いつでもお伺いいたします。

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

受付時間:10:00~18:00(平日)

PAGE
TOP