2022 | 株式会社エクスフィールド

ロボット業界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を変更しないと表示崩れが起こってしまう状態は望ましくありません。

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

例えば上図のように、cardというブログ記事がcotainerに囲まれています。ブログ記事が5個の時、下の2記事が両端に離れてしまい思った通りの見た目になりません。
しかし、ブログ記事は常に更新されていくものなので、ブログ記事がいくつあるときでも期待通りの表示にしなくてはなりません。

拡張可能
拡張可能なCSSとはCSSに携わる人が何人でも問題なく、管理できる状態を指します。
そのため、CSS設計のルールは分かりやすく、新たにチームに加わる人がいても学習コストが小さくなる状態である必要があります。
つまり可能な限り分かりやすく、簡単なルールで設計を行いましょうというものです。

まとめ

HTML, CSSは奥が深いと言いますが、まさにそうだと思います。
今までCSS設計をあまり意識してこなかったという方はこれを機に意識してみるとコーディングの速度も楽しさも倍になると思います。。。！

次回は具体的なCSS設計方法について書いていきます。

UIUXについて

2022.9.7

本日はUIUXについて説明していこうと思います。

UI UXとは？

UX（ユーザーエクスペリエンス）とは、ユーザーがプロダクトやサービスを通して得られた体験を表す言葉、
UI（ユーザーインターフェイス）とは、ユーザーとの間に現れるサービスやプロダクトの外観を表す言葉です。

UIとUXは同じ意味合いではなく、ユーザーとの接点を表すUIは顧客が体験したことによるUXの中に含まれる意味合いを持ちます。

本記事ではもっと詳しく話していきます。

UIをもっと詳しく

UIとは、サービスやプロダクトとユーザーの接点を表す言葉。

サイトのデザインやフォントなど、ユーザーの視界に触れる情報はすべてがUIとなります。
また、UIはユーザーとサービスやプロダクトのタッチポイントを表す言葉なので、
web上の情報だけでなく、PCやスマートフォンなどのデバイス本体の外観なども含まれます。

アプリにおける良いUIの具体例
・どのページからでもTOPに戻るボタンが認識しやすい
・テキストリンクの位置や色がユーザーにとって違和感がない
・見やすいフォント、レイアウト
・フォームに入力補助の機能がある
・ユーザーが迷うことなくメニューや申し込みボタンを見つけられる

UXをもっと詳しく

UXとは、製品やシステム、サービスなどの利用を通じてユーザーが得る体験を表す言葉です。
たとえば、ユーザーが棚に並んだ商品を選んで購入し、使用したのち、また購入したいと思うまでの
工程すべてが「ユーザー体験」、つまり UXとして捉えられます。

アプリにおける良いUXの具体例
・読み込み速度が早い
・アプリ内の導線がわかりやすい（欲しい情報にすぐ辿り着ける）
・入力フォームでの手順がスムーズ
・ユーザーの興味を掻き立てるグラフィック

UIUXの改善策とは？

UIではユーザーの使用感高めることがポイントです。
文字が読みにくいことやボタンのクリックしづらいなどユーザーの使いづらいサイトは
ストレスを与えてしまうので機能面を見直すことをお勧めいたします。

UXでは機能性や操作方法とは異なり、ユーザーの好みにあっているかが良し悪しを大きく左右されます。
そのため、明確なターゲット設定やターゲットへの理解が必要です。

ターゲットの趣味、嗜好や生活から絞り込みサイトへと落とし込みことがより良い改善策と言えます。

まとめ

UIとUXは相互に関連するものであり、ことWebサイトにおいてはUI・UXを
どちらも改善することがユーザーの満足度や業績の向上につながります。

当社ではWebサイトのご相談やお見積りもおこなっております。
気になる方はぜひお問い合わせください。

WordPressのプラグインのインストール方法

2022.8.29

プラグインとはWordPressを自分好みにアレンジするときに導入すると非常に便利なツールです！
デザインはもちろん、集客やシステムを追加するなどの様々なことができます。
WordPressに適切なプラグインをインストールすることでより、自分のサイト目的を達成する助けとなってくれるはずです！

ですが、プラグインは種類がとても多く、どれを使うべきか悩むこともあるかと思います。
そこで人気の必須と言っても過言ではないプラグインを5つ紹介したいと思います！

プラグインとは？

プラグインとはWordPressに備わっていないプログラムを、プラグインを使うことで簡単にカスタマイズできる拡張機能のことです。
インストールして有効にするだけで簡単に「お問い合わせフォーム」を入れたり、「スライドショー」を追加するなど様々なことができます。

プラグインのインストール方法

それではプラグインのインストール方法を紹介します！

まずはWordPressの管理画面から「プラグイン」をクリックし、上部にある新規追加ボタンを押します。

「プラグインを追加」という画面が出てくるので「プラグインの検索」という窓に導入したいプラグインの名前を入力します。

該当するプラグインが表示されるので、「今すぐインストール」をクリック。
「有効化」に変わるのでクリック。
プラグインの一覧に先ほどインストールしたプラグインがあることが確認できます。

まとめ

これでインストールから有効になったため、これからプラグインが利用可能です！
プラグインごとに編集や操作などそれぞれですが、いろいろインストールして試してみてください！

photoshopでちょっとしたアニメーションを簡単に作る方法！

2022.7.12

こんにちは！今日もエクスフィールドの部長をいじっていこうと思います！
みなさんはphotoshopでアニメーションや動画を作ってますか！？
ついつい動画制作用のアプリケーションを使ったりしちゃいますよね。

↓でもこのくらいの簡単な動きならphotoshopで作っちゃった方が楽なんですよね。

タイムラインを表示する

まずはメニューバーのウィンドウ > タイムラインから、タイムラインパネルを表示します。

タイムラインパネルの真ん中に「ビデオタイムラインを作成」というボタンがあるのでそちらをクリック。

動かしたいレイヤーを作る

動きはレイヤーごとで設定できます。
動かしたいイラストを用意し、レイヤーに配置します。

するとレイヤーのタイムラインが表示されました。

レイヤー名の部分をクリックすると、開いて

動きを作る

時間インジケーターが０のところにある状態でタイムウォッチのようなマークをクリックすると◇のマークが付きます。

次に０１:００fのところに時間インジケーターを持っていき、レイヤーの位置を移動します。
すると、０１:００fの位置に◇のマークがつき、キーフレームが打たれました。
これで一度再生してみると動いているのがわかると思います。

今回はふわふわ浮いた動きが作りたいので、０2:００f、０3:００f、０4:００fのところに同じようにキーフレームを打っていきます。

今回は簡単なgifアニメ程度の作り方でしたが、結構頑張ればすごい動画も作れちゃうんです。
またいつか詳しくご紹介できたらと思います！

様々なデザインソフト

2022.4.28

今や様々なデザインソフトが存在します。
本日はソフトの種類・内容についてお伝えいたします！

デザインソフトの種類

ダイアグラム作成
ダイアグラム作成（作図）ツールとは、フローチャートや構造、枠組みの資料といったビジネスで用いる図などを簡単に作成できる製品です。

作成ソフトはこちらです。
・Canva
・Miro 等

最近では Canvaが有名だと思います！

Canvaとは？

Canvaは、オーストラリア発の画像デザインソフトです。無料プランでも十分に利用することができるので、とても人気のソフトになっています。
Webブラウザ上のほか、アプリ上でも利用することができます。パソコン・スマホでも直感的に使用することができます。
Canvaを利用することで、これまでハードルの高かった画像作成を簡単に行うことができます。
PhotoShopやIllustratorなどのプロが使うソフトを使うのは少々自信がないという人も多いのではないでしょうか。Canvaはそのようなレベル感と利用用途の方におすすめのソフトです。

グラフィックデザイン
グラフィックデザインとは、さまざまな描画ツールを利用して、印刷物のデータ作成、写真や画像の編集／加工、オリジナルのアートワークの作成などを行えるツールです。

ソフトはこちらです。
・Illustrator
・Photoshop 等

印刷物を作成する際によく使われるのはIllustratorだと思います。

Webデザイン・アプリデザイン
Webデザイン・アプリデザインとは、Webページやアプリを作成・編集・更新するための機能を提供するツールだ。ワイヤーフレームの作成や細かなデザインを作成するソフトです。

主に
・Illustrator
・Photoshop
・XD
・Figma 等
です。

FigmaはAdobeソフトのXDと使用が似ており、さらに無料で使用することができるため人気のソフトです。

また、デザインの工程で
ワイヤーフレームはXDで作成する→デザインをする際はIllustratorやPhotoshopを使用するということもできます。
最近ではXDが容量が軽く使用しやすいこともあり、重要なデザインはIllustratorやPhotoshopで作成し、書き出した後にまとめてXDで構成していくパターンもあります。

まとめ

用途によって使用することで、満足のいくデザインを作成することができます。
無料で使用できるソフトもいくつかありますので、気になる方は一度使用して見てください♪

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

2022.4.8

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

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

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

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

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

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

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

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

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

3.豊富な知見

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

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

Blog ブログ

記事一覧