つくばランスLOGO

blog ブログ

1月列例会2023

本年もどうぞよろしくお願いいたします【2024年1月月例会】

update : 2024.01.22

category : 活動日記

author : Kayo

令和6年(2024年)能登半島地震で被害にあわれましたすべての皆さまに心よりお見舞い申し上げます。
被害にあわれた皆さまの平穏な日常が、一日でも早く戻りますことを心よりお祈り申し上げます。

目の前にある日常が当たり前ではないと再認識する年明けとなりました。当たり前の日常が送れていることに感謝し、つくばランスは引き続き前進したいと考えております。
本年もどうぞよろしくお願いいたします。

Adobeが衝撃の発表

昨年11月の月例会記事で「AdobeがFigmaとの買収合意を発表した」という話題を取り上げました。デザイナー界隈では、デザインツールは「ついにFigmaの時代か!」とかなり話題になっていたのです。そして、私たちの身近でも、いよいよFigmaの勉強を始めたという声が増えていました。

なお、つくばランスではチーム結成当初の3年前にFigmaには触れていました。個人の仕事では、Figmaを取り入れてるメンバーもいます。つながりのある制作会社様のほとんどがXDを使用している現状があるため、チームとしての仕事はXDを使うことがほとんどですが、Figmaにシフトしていくタイミングを見計らっている状況でした。

アドビとFigmaが合併契約の終了に合意

そのような中、昨年12月にAdobeとFigmaが合併契約の終了に合意したというニュースが飛び込んできました。

「えっ、そんなことあるの?」

チームも、他に参加しているデザインコミュニティ内も、一気にその話題が飛び交い衝撃を受けました。

プレスリリースの抄訳はこちらから >>

チームとしてのこれから

現状を鑑みると、引き続きXDを使うことが多くなりそうです。

但し、ノーコードツールのSTUDIOでは「Figma to STUDIO」というプラグインをインストールすることで、Figmaで起こしたパソコン版のデザインをSTUDIO内にインポートできるようになってきました。正確なインポートのためのルールに沿ったデータを作ることが前提であり、まだまだ改良は続いているようですが、Figmaはこれからもクライアント様と制作者にとって魅力的なツールであることには間違いありません。

メンバーそれぞれが、常にアンテナを張りつつ、様々なニーズに対応できるよう情報共有して参ります。

XDの透過

XDではステート機能といって、1つの要素に対して複数の機能を持たせることができます。例えば、WEBサイト上のリンクボタンをホバーした際に色と文字が反転するなどの動きをつけられます。

先日、XDで作成したリンクボタンでホバー時に不透明度70%になるよう設定したのですが、コーディング担当がホバー時の設定が確認できない、ということが起こりました。
その原因は、「パッと見てその設定がわかるような作り方をすることができない」ことでした。
では、どのように作っていくか説明していきます。

ボタンをデザイン後、コンポーネント化し「ホバーステート」を追加し選択します。するとアピアランスに「透過」、つまり不透明度を調節できるようになります。全体の不透明度が70%になればよいので、感覚的にアピアランスの不透明度を「70%」に設定しました。

ところがこのように設定すると下の図のように、不透明度100%に設定した「初期設定のステート」つまり通常時の透過率も70%になってしまいました。

まずホバーステートを選択した状態でアピアランスの不透明度を100%に戻します。
ではどのように設定していくのか?というと、ボタンを構成する要素(ここでは長方形・文字・アイコン)それぞれに不透明度を設定しなくてはなりません。
まずは長方形をダブルクリック、あるいは右側のレイヤーパネルで長方形を選択します。

そして長方形の不透明度を70%に設定。文字とアイコンもそれぞれに同様の設定を行います。

こうしてホバーステートの設定が完了しました。各要素に不透明度70%を設定していますが、グループを選択した状態だと不透明度は100%。やはりパッと見て分からない状態です。

背景色である長方形の部分だけ不透明度を下げるなど、各要素にそれぞれの設定をすることができるのは素晴らしいことです。
しかし、デザインの詳細を伝えにくいパターンもある、ということがわかりました。
また、XDでは不透明度ではなく「透過」となっています。「アピアランス」というメニューの表示も、Photoshopなどでは見かけないのでピンとこない人もいるでしょう。

XDの機能に頼るだけでなく、下記のように説明を追加しておくとより伝えることができる。というのが今回の反省でした。

ランチは「クァドリフォリオ」

今回は、つくば市筑穂にあるイタリア料理店「クァドリフォリオ」さんに伺いました。メンバーで話をしていたら、4人中3人がリピーターだったことが判明!とても人気のお店です。

こちらのお店、パスタの種類がとても豊富です。そして、ドルチェがキュート!

近々、研学ウォークに詳細レポート掲載しますのでご期待ください!

クァドリフォリオ

住所  : 

つくば市筑穂2-3-4

電話番号: 

029-864-2227

URL  : 

https://www.instagram.com/quadrifoglio_tsukuba/

かよ(コーダー、デザイナー)

天王洲にゴッホアライブを見に行きます。楽しみ!

https://blooming-m.com/

@bloomingm8787

works 制作実績

メンバーそれぞれ主に制作会社様からご発注頂く案件を中心に業務を行っております。
つくばランスは現在、非公開案件を中心に活動しております。
実績の詳細はお気軽にお問い合わせください。

view more