Blog

記事一覧

カテゴリー:ブログ

  • ブログ

Photoshopのデザインカンプからコーディングする

XDで作成されたデザインカンプに慣れていると、最初はPhotoshopからのコーディングに戸惑うことがあると思います。
ここではPhotoshopのデザインカンプからコーディングする際に覚えておくと便利なことを紹介していきます。

コーディング用に環境を設定する

単位をpxにする
1.左上の編集タブから環境設定をポイントし、単位・定規を選択する
2.環境設定画面が開いたらpixelに変更する
単位設定

ワークスペースを設定する
1.レイヤー、プロパティ、カラー以外のコーディングに使わないパネルを閉じる
パネル設定

2.文字、情報パネルを表示させる
ウインドウメニューから文字、情報をチェックする
パネル設定1
文字パネルをプロパティの隣に、情報パネルをカラーの隣にそれぞれドラッグ&ドロップする
パネル設定2

3.コーディング用のワークスペースとして保存しておく
※呼び出す時はウィンドウ→ワークスペース→コーディング用
パネル設定

コーディングで最低限使うツールを紹介

コーディングでよく使うツールは以下の通りです。
1.移動ツール:オブジェクトを選択するとプロパティで幅、高さを確認できる。このツールでほとんどの値が取得できる。
2.ものさしツール:線を引いてその長さを確認できる。細かい隙間を測りたい時に使う。ものさしツールとスポイトツールは同じ場所にある。長押しすると選択できる。
3.スポイトツール:カラーコードを確認できる。移動ツールで選択しても確認できる。
4.文字ツール:文字を選択してコーディング用に貼り付けることができる。移動ツールでダブルクリックしても選択できる。
ツール

値を取得する方法

1.オブジェクトの値を取得する 
移動ツールでオブジェクトを選択するとプロパティパネルで幅、高さ、ボーダーなどの値を確認できます。
値の取得

色のアイコンからカラーコードを確認できます。
カラーピッカー

ボーダーが設定されている場合、オブジェクトを選択すると線の太さや色、border-radiusを確認できます。
ボーダー

透過画像はレイヤーパネルの不透明度で確認することができます。 不透明度80%ならCSSはopacity0.8になります。
不透明度

2.文字の取得
文章を文字ツールで選択するか移動ツールでダブルクリックします。文字パネルを開くとfont-family、太さ、文字サイズ、行間line-heightなどを確認できます。
文字の取得

3.余白の取得
移動ツールでオブジェクトを選択した状態でctrl(command)を押すと近くのオブジェクトとの距離が表示されます。
余白の取得

画像の書き出し

一つ一つのレイヤーから書き出す方法
対象の画像を移動ツールで選択するとレイヤーがハイライトで選択されます。レイヤーの上で右クリックし書き出し形式を選択します。
書き出し
PNGやJPGなどの書き出し形式、 ファイルサイズ、画像サイズを指定して保存することができます。ファイルの保存先を指定して保存します。
書き出し

一括で保存する方法
レイヤーの名前をjpgや.pngなど画像の拡張子をつけて保存します。レイヤーをダブルクリックすると名前を変更できます。画像の拡張子になったものが一括で書き出しできます。
一括書き出し01

ファイル ⇒生成 ⇒画像アセットにチェック ⇒保存(ctrl+s) 
一括書き出し02

開いているpsdファイルと同じ階層にassetsファイルが生成され、中に画像が書き出されます。
一括書き出し03
上記の方法だと基本的には等倍で書き出されますが、2倍サイズで書き出すこともできます。
2倍サイズで書き出したいときはレイヤー名を変更するときに200%と入力し半角スペースの後に名前を付けて@2xとつけて保存します。(ctrl+s) 例)200% mv@2x.png

すべての画像に対し同じ作業をするのが大変なので、まとめて書き換える方法があります。
名前を書き換える用のレイヤーを作る:右下のプラスボタンを押して一番上にレイヤーを作ります。
名前 1倍の方を書き出すファイル名をつける:「default 1x, 200% 2x/@2x」 ⇒保存します。
全部のレイヤーにこの設定があたる:全部の画像が1倍、2倍のサイズで保存されるようになります。
一括書き出し2倍

  • ブログ

ドメインの重要さ

ホームページを制作したいけど何から始めてみればいいかわからない
そんな方にまずはドメインがなぜ必要なのか説明します。

ドメインはインターネット上の住所
https:××××.○○.jp
××××の部分になります。

××××の部分は自分のオリジナルアドレスとして取得できます。

ドメインの種類

ドメインには独自ドメインとサブドメインがあります。
独自ドメインはユーザーが自らアドレスを決めて利用できるドメインのことです。
一方、サブドメインは独自ドメインをさらに細かくしているアドレスのことを指します。

例えば、
https:△△△.××××.○○.jp

この場合は△△△がサブアドレスになります。

独自ドメインのメリット

主には自分でアドレスが決められることが大きなメリットとなります。
自社のアピール、専用メールアドレスの使用、検索エンジン(SEO)にてヒットしやすくなるなどがあげられます。

独自ドメインを使用することで自社の名前や、ブランディングができ、ユーザーが検索をしたときに上位に表示されるようになります。

サブドメインのメリット

なぜ、サブドメインを作成するのかメリットをご説明します。
独自ドメインサイトとは別のコンテンツサイトを作成したい、複数のサイトを運用したいなどの目的があげられます。

その他、ドメイン費用が少なく済むことも挙げられます。
いくつも独自ドメインからホームページを作成するとそれだけの費用がかかってしまいます。
現状使用しているホームページとは別のカテゴリーで分けたいということですと別ですが
費用を安く抑えたい!という方はサブドメインからの作成することをお勧めいたします!

まとめ

弊社ではドメインやサーバー関連、WEB制作周りでお困りのことがあればぜひ、ご相談ください!

  • ブログ

ランディングページの魅力

「ホームページ」と「ランディングページ(LP)」の違いについては過去の記事で紹介をしましたが、今回はランディングページにスポットライトを当てて紹介します。

商品の魅力を効果的に伝える

ランディングページは通常のホームページのようにトップページや会社概要などを作らず、
1ページ完結型です。
ページの移動をすることなく、商品をしぼってユーザーに紹介ができるので、
閲覧をしにきたユーザーは簡潔に必要な商品の情報だけを取り入れることができます。

事例の紹介


https://cagiana.jp/2021christmas/index.html
直近で作成を担当させていただいたCAGIANA様のクリスマス販促LPです。

商品の情報を紹介するだけでなく、こういった季節のイベントに合わせて
販促をできることもランディングページの魅力になります。
また、こういった季節のイベントに合わせたページはgoogle広告などと合わせて運用がしやすいのも魅力の一つです。

まとめ

今年度は特にランディングページの作成依頼が多く、
需要の高まりを感じる年でした。
弊社では様々な用途に沿ったランディングページの制作が可能ですので
お気軽にご相談ください。

Contact

猫と本棚

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

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

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

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

PAGE
TOP