ブログ | 株式会社エクスフィールド

現役デザイナーに聞いた！FigmaとXDどっち使ってる？

2023.7.5

こんにちは！
エクスフィールドです。
ジメジメな梅雨、まだまだ続きそうですね！雨が降っても気温は高く、バテやすい時期ですが、エクスフィールドでは新しいデザイナーさんが仲間入り！新たな風が吹いて活気に溢れております。デザイナーの悩みなどお話しする機会も増え。。。気になることが一つ！デザイナーさんはfigmaとXDどちらを使っていますか？

FigmaとXDどっち使ってる？

Webデザイナーに衝撃が走った2022年9月。AdobeがFigmaを買収したというニュース。
私はXDユーザーでXDが生き残ると、、、思っていました。（思いたかった）ですが、2023年1月。AdobeXD販売終了という悲しい事実が耳に入ってきました。
ほとんどの案件をXD（たまにPhotoshop）で制作していたので、かなりショックでした。
弊社ではどうなのか？結果は、、、
まだXDを使用しているデザイナーさんの方が多い印象です！

FigmaとXDどう違う？

FigmaとXD、実際のことろ違いはあるのでしょうか？実は、機能にそこまでの違いはありません。
XDは、Adobeユーザーで、PhotoshopやIllustratorを使用している方は、操作が似ているので直感的に作業できて使いやすいかも！
ではAdobeユーザーにとってfigmaは使いにくいのか？
そんなことはないです。デザイナーにとってXDからfigmaに移行するのは、そこまでハードルは高くないと思います。
私は、XDからfigmaに移行しつつある段階で、まだまだfigmaの機能を使いこなすまでには至っていませんが、基本的にはXDと似ています。

例えば、左側にレイヤー、真ん中に作業エリア、右側にフォントやカラーなどが変更できる操作エリア。
コンポーネントやショートカット機能などもほとんど同じです。

Figmaのメリット

figmaのメリットは？
・Web上で共同作業
複数のデザイナーが同じファイルにアクセスしてリアルタイムで共同作業できます。
・リンクで共有
デザインツールを持っていない方でもアクセス可能です。
・プラグインが充実
こんなことしたい！が大体叶います。
・オートレイアウト機能
作業時間が大幅カットできます。

次回詳しく解説します！

魅力がたくさんのFigmaの機能については、また詳しく解説させていただきます！これからデザインを勉強する方は、無料でできるので、ぜひ触ってみてください。

進化の早過ぎるchat GPT

2023.6.30

いつもお世話になっております。
エクスフィールドです。

突然ですが、、、
chatGPTの進化が早過ぎる！！

chatGPTが話題になりだした当初に少し触って、あとはニュースや記事をたまに見かけては流し見する程度でしたが、
言葉も知らない、ハイハイくらいしか出来ない赤ちゃんがものの数ヶ月で小学生くらいになってました。

今回は今週エコノス株式会社さんで6/27に開催されていた、
「みんなが知らないChatGPT活用法」の感想を軸に所感を書ければなと思います。

・GPT-4がすごい

chat GPTは無料版がGPT-3.5、２０２３年３月に公開された有料版のGPT-4の2種類があります。
有料版は約20ドルで利用できるようです。
また、Microsoftが提供しているBingというブラウザを使えば無料でGPT-4を体験できるようです。

少しずれてしまいましたが、GPT-4はより人間に近い言葉で返事を返してくれるのが特徴で、
無料版のGPT-3.5の回答と比べると精度もかなり高いように感じました。

また、chat GPT-4ではプラグイン機能が使えるようになっていて、
リンク先のページの内容や動画の内容を読み取って文字化してくれたり、日本のサービスだと「食べログ」がいち早く開発に取り組んでいるようで、
「今日の１９時から入れる居酒屋」のように入力すると、５つ程度提案してくれて予約できるというサービスのようです。
他にも今はいろんな会社がAI開発を進めているようで、すごい速度で発展しているなあという感想です。

・chat GPTとかけあわせた.bubbleがすごい

chat GPTは学習したものを溜め込んでアップデートして再利用するという性質があるため、
通常の業務に組み込もうと思うと情報漏洩の危険性が高まります。
そこで、bubbleのような外部システムから利用することで情報漏洩のリスクを下げることが可能になります。

また、chat GPTのみで利用しようと思うと、「どういったシステムなのか」、「前提条件はなにか」、「詳細な内容はなにか」などなど
詳細な質問を投げないと最適な解答が返ってきませんが、bubbleなどの外部システムを使えば、半自動である程度のシステムを生成できるので、
開発の効率をあげることも可能になっています。

bubbleと使い方などを紹介してくれている記事もたくさん出てきますので、興味のある方は是非調べてみてください。

bubble公式はこちら

・まとめ

少し情報収集をしてなかっただけでここまで進化しているとは驚きでした・・。
仕事用のPCにもchatGPTのアプリを入れたのでこれからはどんどんchatGPTを使いながら、しっかりアンテナを貼ろうと思います！

優良WEB様で弊社の紹介をしていただきました！

2023.6.19

優良WEB様で弊社の紹介記事を作成していただきました！

優良WEBとは？

優良WEBサービスは掲載数No,1の日本最大級のホームページ制作会社検索サイトになります。
地域・業種・特徴・予算などを掛け合わせて自身の条件にあった会社を検索することが可能です！

しかも掲載数はなんと10,913社（6/16時点）もあり、47都道府県から検索できます。

優良WEBのここがすごい

優良WEBではどの業種やどんなサービスに強いかが一目で分かる記事が豊富にあります。
特徴別記事一覧
 業種別記事一覧
 地域別記事一覧

また、地域別一覧が用意されているように、各県それぞれに紹介ページが用意されていて、「日本最大級」は伊達じゃ無いなあと感じました！

上記の企業紹介ページ以外にも、たくさんコラムが投稿されています。
中には流行りの「ChatGPT」の記事なども用意されていて、守備範囲の広さに驚きました。

まとめ

優良WEBというサービスは、仕事を依頼したい企業の人はもちろんのこと、
制作会社目線でもコラムなどから新しい発見があり、サービス名にもあるようにまさに”優良”WEBでした。
みなさんも是非一度拝見してみてはいかかでしょうか？

優良WEB
https://yuryoweb.com/
コラム一覧
https://yuryoweb.com/column/

ホームページからの問い合わせを１０倍にすることができた理由

2023.6.9

6月、季節は夏直前でもうすぐで2023年も半年が終わると考えると恐ろしいですね。
今回はその半年間で急成長のお手伝いをさせていただくことができたクライアント様を
自分の所感と備忘録などもかねてご紹介をしたいと思います。
今回弊社へご依頼いただいてから問い合わせ件数が１０倍、売り上げで見ると前年から４倍も上がったとのことでした。
これは弊社のなかでもかなり良い結果を出せたなと思っていますし、今もなおどんどん右肩上がりに成長しています。嬉しい限りです。

何故ここまで成長できたのか？

これは様々な理由が考えられますが、商材が「車」と分かりやすくほとんどの人が必要としている物だったというのが強いと考えています。
言い方を変えると、その商材についてどれだけ知っているか、どういう人がその商材を欲しいと思っているのか、どういう人が買おうとしているのかなどの
ペルソナを想像しやすかっということになります。
ペルソナを想像できれば見た人を惹きつける広告の打ち方や見せ方ができる訳ですね。

成功したきっかけはなんだったのか？

きっかけというよりは「積み重ねが実った」という表現のほうが正しいと思います。
その積み重ねですが、とにかく毎日広告の管理画面を見て数値に異常はないかの確認をして、
キーワードの選定や広告の見出しなどを改善していったことです。
成果が目にみえるまでは辛い作業ですが、とにかくトライ＆エラーあるのみです。
ですが、闇雲に色々変更するのではなくある程度テーマを決めてから変更をかけると、
何がダメで何が良かったのかが自分の中でも分かりやすいのでおすすめです。

気をつけた点はなにか？

これは２個目とすこし被るところもありますが、とにかく広告と向き合い続けて、
改善を忘れないということです。
これは今現在でも続けていることで、どうすればもっとコンバージョンが増えるのか。
競合他社が現れた時どう対策するのが得策か。など毎日考えています。

■まとめ

つらつらと概要だけ書きまとめましたが、また機会があれば各項目の詳細も書いていければと思っています。
広告のコンバージョンが出るまでは不安で仕方ない事が多いです。これは他社さんとかの話を聞いていてもみんな大体同じ感覚なんだなあという印象です。
制作会社の一ディレクターの感想文のような記事になってしまいましたが、少しでも誰かの助けになれていたら幸いです。

ホームページ制作会社的観点のコーディングで注意していること

2023.5.1

お久しぶりです！随分ご無沙汰してしまいましたが、表題の通りホームページを制作する上で注意していることを制作会社的観点でメモも兼ねて書き記していこうと思います。（諸説あり）

１.ホームページの全体像の把握

どんな作業でもなるべく効率化したいというのは世の常だと思います。
ここで重要なのは「どのページにどんなパーツがあるのか」、「どのパーツは使い回しが効きそうなのか」です。これは「手を抜く」という訳では決してなく、上記のようなことを把握しておけば力の入れるべきページに１００％以上の力を使えると言う考え方です。

2.ではどうやって共通化できるパーツを管理するのかを考える

共通化できるパーツとしてすぐに思い浮かぶものが「ヘッダー」と「フッター」かと思います。
これはまあ日本語で言うと頭と足で、頭がへんてこだとぱっと見の印象が最悪ですし、足がへんてこだとページ全体の締まりがめちゃくちゃ悪くなります。
また、ヘッダーに関してはページ全体を行き来するためのメニューなども大体の場合は内包しているので、ここの使い勝手が悪いとページ全体の印象も悪くなります。
そういった観点からここは毎回そこそこ時間を取って作ってます。

ヘッダーとフッターもそうですが、flexboxを使って横並びにするボックスなどは
ホームページでは多々出てくると思います。（諸説あり）
こういったものはモジュール化してしまってパーツごとにCSSを小分けに作成して、
微調整をページ固有のCSSで行うようにしています。

他にも共通化できるものはたくさんあります。
・ページのメインカラーやサブカラー
・コンテンツのインナーの横幅
・テキストサイズ
・ブレイクポイント

この辺の細かい設定はホームページを作り始める一番最初に全体のベースとなるCSSを作成して、
Scssの変数として全て入力してしまいます。
結構めんどくさい作業ですけど、これやっておくと毎回カラーコードの確認したりとか、
ページごとにちょっとずつコンテンツ幅が変わって気持ち悪い感じには絶対ならないので、やって損はないです。まじで。

この辺の内容に関しては過去の記事でも紹介しているので、
興味が湧いた方は是非ご覧ください！
CSS設計ってどんなもの？

3.idやclassなどの命名規則のすり合わせを忘れない

これ忘れると大事故になります！！絶対にやってください。
バイトとかで制作会社に行ってる方とかもディレクターとか上司の人にしっかりどうするか聞いてあげるとにっこりしてくれますよ。多分。
まあそれくらい大事なことだと思ってるんですけど何が大事なんだいという話。
ちゃんとすり合わせしておかないと、管理がめちゃくちゃにめんどくさくなります。

色々なケースがありすぎるので、よくありそうな事例だけあげますが、
・どこに何のスタイルが効いているか全然わからない。
・修正箇所を特定するための検索がすごく不便になる、

ページ数が多くなればなるほど関わる人も増えると思います。
だからここはしっかり擦り合わせて分かりやすくて可読性のあるコーディングをしましょう！

まとめ

今回はTipsというよりかは何を考えてホームページ制作を行うのがいいのかということを書いてみました。自分が何を考えてコーディングしたいのかを再度整理できていい機会になりました。
もちろんこの辺の考え方は制作会社によって様々だと思うので、あくまで一ホームページ制作会社の考え方として
参考にしていただければ幸いです！！

ロボット業界No1山善さんのショールームへ

2022.11.24

「ロボット業界No1山善さんの企業秘密が知れるショールームが凄かった」

先日、大阪にある山善さんショールームであるTFS支社ロボットテストラボに行って参りました。

コロナ禍でオンライン会議が多かったのですが、もうすぐショールームがオープンする！

ということで、見学・撮影をしてきました。

そこには、協働ロボット「TECHMAN」やファナックのCR‐X、ABBの双腕型YuMiなどの協働ロボット5台をはじめ、ハンドなど周辺機器を展示しています。

「ショールームであっという間の２時間」

人にはできないことをロボットがしてくれる時代。そのロボットは進化し続けています。実際に動いているところを見ること２時間！あっという間の時間でした！

何種類もある部品の中からロボットが適切なモノを選び運ぶ、暗闇の中でもそれが可能。先端を用途に合わせて最適なものに取り換えれば、幅広い用途にロボットが活躍しちゃいます。

山善さんショールームは、そういった実践的なことができるラボみたいなところ。

山善さんショールームでお悩みを解決

例えば

・こんなモノをつかめるアームを探している

・この作業をもっと効率よく終わるようなロボットを探しているなど

山善さんショールームでは、アームを３Dプリンターで即席で作成でき、

プログラミングから実践まで見ることができるので、

事前に、何で悩んでいるかやどんなアームが欲しいかなどをSIerまで問い合わせてから足を運んでみてください。

ロボット業界の最先端で活躍している心強いSIerが在籍している山善さんショールーム！TECHMANの女性専任営業チーム「テックウーマン」も活躍！誰でも手軽に扱えることを丁寧に説明してくれます。

お悩みの方は、ぜひ一度お問い合わせください。

ショールームの詳細は、私たちが制作中のホームページまで。

ただいま山善様とエクスフィールドで力を合わせて制作中です。もう少々お待ちくださいませ。

PhotoshopでWebデザインをはじめる前にやるべき初期設定

2022.11.8

本日はPhotoshopで初めてWebデザインをされる方に向けて、初期設定の紹介をしたいと思います！

単位とグリッドをピクセル(pixel)にする

まずは単位です。Photoshopの環境設定から単位・定規という項目を開きましょう！
画像にあるように「pixel」に設定しましょう！
印刷物などでは「mm（ミリメートル）」や「cm（センチメートル）」を使いますがWebの世界では「pixel(ピクセル)」を使います。

Windows：編集>環境設定>単位・定規
macOS：Photoshop>環境設定>単位・定規
を選択し、「単位」の定規と、文字の部分を「pixel」に変更しましょう。
「新規ファイル解像度のプリセット」の単位も「pixel」に変更しましょう。

では、グリッドも同様に「pixel」に変更していきましょう！

グリッドとは、上の画像のようなグレーの線のことです。
これがあることで余白やコンテンツの幅を計らなくてもデザインすることができます！

Windows：編集>環境設定>ガイド・グリッド・スライス
macOS：Photoshop>環境設定>ガイド・グリッド・スライス
を選択し、「グリッド」の単位を「pixel」に変更しましょう。
グリッド線を「10」、分割数を「10」に設定しましょう
また、人によっては8の倍数でデザインするため、グリッド線を16、分割数を4に設定するといった方もいるため、使いながら調整していくのが良いかと思います！

レイヤー名に「〇〇のコピー」

レイヤーをコピーした際にレイヤー名が自動的に「〇〇のコピー」になります。
それをまたコピーすると「〇〇のコピー〇〇のコピー・・・」のようにどんどん増えていくため、レイヤーを管理するのが難しくなってしまいます。
なのでこれも変更しましょう！

レイヤーパネル>設定ボタン>パネルオプション
を選択し、一番下にある「コピーしたレイヤーとグループに「コピー」を追加」という項目のチェックを外しましょう。
するとコピーしてもレイヤー名に「コピー」名前がつかなくなります！

まとめ

他にも気になるところが使っていくうちに出てくるかと思いますが、今回あげたものは重要度が高いかと思います。
人それぞれどういった設定が使いやすいかは違うと思いますので、使いながら調整してみてください！
ぜひ参考にしてみてください！

CSS設計ってどんなもの？

2022.10.18

コーディングをする際、CSS設計を導入していますか？
小規模なサイトやLPでは、CSS設計は意識せずとも大きな問題はありません。
しかし、サイトの規模が大きくなるにつれCSS設計は必須になります。

良いCSSとは

GoogleのエンジニアであるPhipi Walton氏が言及した「良いCSS」が以下4点。
・予測可能な
・再利用できる
・保守可能な
・拡張しやすい

予測可能
1つのサイト制作で関わる人は必ずしも自分1人ではないですよね。
自分以外の人がそのコードを見たときにどのようなコードなのか読み解けることが重要です。

・クラス名を省略しない

<p class="txt">テキストが入ります。</p>

<p class="text">テキストが入ります。</p>

text以外にも
・button → btn
・title → ttl
・description → desc
などなど。
チーム開発の際、チーム内でどの単語は省略する・しないとルールが決まっているなら大丈夫ですがそうで無い場合、「ここは省略しているのにここは省略していない」なんてことがほとんどです。クラス名に一貫性がなく可読性の低い読みにくいコードになってしまいます。
基本的にクラス名を省略するメリットはクラス名を短くする以外、ほとんど無いので誰が読んでも理解できるように省略しないクラス名を推奨します。

再利用可能
既存のパーツを別の箇所でも使用したいとき、スタイルを書き直したりする必要がない状態を再利用可能な状態と呼びます。

See the Pen
Untitled by sakurai-ex (@sakurai-ex)
on CodePen.

例えば上図のように、一番上のhtmlを見てみるとcardの中身にテキストとボタンがあります。
ボタンはカードの中身以外でも使う場面は想定されますが、CSSを見てみると

.card .button { 
  padding: 10px 40px; 
  background: orange; 
  text-decoration: none; color: #fff; 
}

上図のように.cardの中の.buttonと限定的な使用方法になっています。
これではCSSSは再利用ができないです。可能な限りCSSの詳細度は低くしましょう。
なので今回の場合の理想的なCSSは

.button { 
  padding: 10px 40px;
  background: orange;
  text-decoration: none; color: #fff; 
}

上記のようになります。

保守可能
サイト内で新しい機能を追加・更新をする場合に既存のCSSを変更しないと表示崩れが起こってしまう状態は望ましくありません。