投稿者: やまぐーち

ご覧いただきありがとうございます。
第0ユニットのやまぐーちです。

2023/10/27-28で社員旅行へ行ってきました。
2023年度はセクションごとに
2回に分けて開催しました。
(前半の社員旅行ブログはこちら)
参加費を支払えば両方とも参加可能としており
今回はなんとほぼ全員が参加するという
楽しい旅行となりました！

行先は野間にある
「ウッドデザインパーク野間」さんです。

到着してお部屋に入ると、
おしゃれでオーシャンビューなお部屋に
みんなテンション爆上がり(笑)
みんな写真をたくさん撮っていました。

夜ご飯までは、海で遊んだり写真を撮ったりしました。
10月でしたが、暖かい気温で海の水もちょうど良く
軽く足だけ濡らすつもりが、
がっつり入ってしまっていた人も(笑)
今年一番夏らしいことしてるかも！と
言ってる人もいて楽しく過ごせました。

お待ちかねの夜ご飯！

山の部ではお肉が多かったですが、今回は海の部という事もあり様々な魚介がありました。
おいしいお肉＆魚介類、お酒を楽しみました。
…が！なんと途中ですごい大雨＆雷に。
みんなで、慌てて食べ物類を退避させたりと慌てた夜ご飯となりました。
が、それも良い思い出です。

お部屋に戻った後は、サプライズ！
今回の旅行でも誕生日当日のメンバーがおり、
みんなでお祝いしました。
とてもうれしそうな表情を見れました。

夜はお部屋でお話ししたりみんなでゲームをしたり、
外で焚火ができる場所があったので焚火をしたりと各々楽しむことができました。

今年の社員旅行は「グランピング」をテーマにして行われましたが
山も海も楽しかったです。

2024年度の社員旅行はどこになるのかな～？
楽しみです！

次回のブログもお楽しみに。

ダンデライオンズでは社員同士の親睦を深めるための「レクリエーション」を定期的に開催しています。

今回は懇親会を11月に行いました。
久しぶりの懇親会開催となり、2020年の10月に行って以来の開催です。

今回はストリングス名古屋のシェフズライブキッチンにお邪魔しました。
素敵な空間とビュッフェ形式のご飯でみんなのテンションも上がっていました！
私のお気に入りはローストビーフとマッシュポテトです(笑)

懇親会には来年入社予定のメンバーにも参加していただきました。
はじめはとても緊張している様子でしたが、徐々に緊張もほぐれ楽しそうに会話していました。

各テーブル、仕事の話や趣味の話などで盛り上がっていました。

中盤では来年入社予定のメンバーによる自己紹介をしてもらいました。
辛い物が好き、出身地のアピール、一人暮らしを始めた報告など、何かしら個性を感じる内容で感心しました。
来年入社してからが楽しみです。

やはりみんなと実際に会って、おいしいご飯を食べながらお話しするのは楽しいなと実感する時間でした。
みんなの楽しそうな様子をみてやってよかったと思いました。

次回のレクリエーションもお楽しみに！

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。

今回のテーマは「デザインの4原則」について紹介していきます。

「デザインの4原則」は第0ユニットテーマのWEBデザインだけでなく、デザイン全般の原則です。デザイナー以外にも参考となる原則で、4原則を抑えるだけでも他の人に伝わりやすくなり資料作成などにも役立ちます。

「デザインの4原則」とは『近接』『配列』『反復』『対比』のことを指します。
この4原則をダンデライオンズのサイトを用いてご紹介していきます。

近接:Proximity

簡単に言うと「グループ化」です。
関係があるものは同一グループに、関係がないものは別グループに分けることで視覚的にもわかりやすくなります。

以下画像の場合、左側はすべてのQAが固まっており見づらくなっています。右側の画像のようにQAのセットは一緒に、違うQAは余白を開けてあげるとグループがわかりやすくなります。

配列:Alignment

関連する情報の色、フォント、配置を統一することです。
規則性もなくむやみに上記項目を変えてしまうと直感的に理解できません。

以下の画像の場合、左側の画像は文字列が「真ん中寄せ」「左寄せ」「右寄せ」が混ざっており、またフォントの色も違って情報が多くなっています。
右側のように統一することで、理解しやすくなります。

反復:Repetition

同じ要素を繰り返し、一貫性を持たせることです。

以下の画像の場合、上の画像は「デモサイト」「料金について」「ご利用までの流れ」がバラバラのデザインになっておりごちゃついています。
下の画像は同じデザインを使っていることで一貫性があり情報を追いやすくなります。

対比:Contrast

優先順位が高い情報を強調することです。

以下の画像の場合、左側は見出しがわかりづらく何を伝えたいのかわかりづらいです。
右側の画像では見出しが太字の青色文字になっており何を伝えたいのかわかりやすくなります。

デザインの勉強をしていなくても、上記の4原則を使用するだけでも全然違うのでぜひいろんなシーンで活用してみてください。

次回の技術者ブログもお楽しみに。

参考：
https://bulan.co/swings/design4principals/
https://docodoor.co.jp/staffblog/design-4general-rule/
https://fare.blue/2020/03/design-4rule/
https://321web.link/design-4principles/

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はＷＥＢデザインをテーマにしている第0ユニットです。

第0ユニットでは、ダンデライオンズで公開している各種サイトの管理をしております。

最近「初歩的すぎる…」となった出来事をご紹介します。

とある日、うちの代表より「オフィシャルサイトの読み込みが遅いんだけど？」と突っ込みをいただきました。
第0ユニットメンバーで原因を探るため使ったのが「Google PageSpeed Insights」です。

Google PageSpeed Insightsとは…
その名もずばりですが、サイトの読み込み速度をスコア測定してくれるサイトになります。
結果を3段階評価(Good、Medium、Low)してくれて、割と細かく問題を教えてくれるとても頼りになるサイトとなります。

早速URLを入力し計測したとところ、まさかのLow…orz

早速問題を確認したころ、MB越えの画像がありました。
なんと初歩的…

経験者さんであればご存知だと思いますが、画像の容量が大きければ大きいほどサイトの読み込み速度は遅くなります。
Windowsでも大きな写真を開こうとすると、読み込みに時間が掛かりますよね。
それと同じです。

実際作っているときは見た目重視になってしまっており、全く画像サイズを確認しておらず。
対象の画像はGIFになっておりキラキラと動いておりました。
対応としては、今回は静止画かつ軽量化した画像に変更しました。

他にも大きい画像をCSSで無理やり小さくしている箇所もあり、ソースレビューって大切だなと実感しました。

他にも使用されていないCSSについてやテキスト圧縮など細かいところまで指摘してくれていました。とても便利ですね。

本来論とすれば、リリースするタイミングで「Google PageSpeed Insights」で確認をするべきなので今後は取り入れていきたいと思います。

次回の更新もお楽しみに。

こんにちは。やまぐーちです。

11/20(土)に東京で行われた、ゲームマーケット2021秋に参加してきました。
出展したのはカードゲーム「HELLO WORLD」です。

今回は「デ・ジ・キャラット」とのコラボ版を持って参加しました！

当日の朝4時に名古屋を出発して車で東京へ向かいました。

国際展示場についたのは8:30頃で、ビッグサイトの建物を見て来たなぁと実感します。
何度来ても、やっぱりこの写真は撮ってしまいますね。

中へ入り設営準備を行い、イベント開場を待ちます。
今回は、布を新調したりゲームマーケット特別企画を用意したりと気合十分です。

開場時間となり、「開場します！」というアナウンスと拍手でゲームマーケットが開始されました。この時聞く拍手はいつもジーンとしてしまいます。

緊急事態宣言が明けているということもあり、たくさんの人が参加されていました。
入場規制もあったようで、ビックサイトから駅のほうまで待ち行列があったそうです。

そんな中ダンデライオンズのブースではゲームマーケットの初日と「デ・ジ・キャラット」の効果はすごく、たくさんの人にお立ち寄りいただきました！
チラシを配っていても、何度見かしていただいたり「でじこだ！」と言っていただけたり、やっぱり「デ・ジ・キャラット」はすごいんだなと思いました。

ゲーム説明をしていて、「面白いですね！」と言われると伝えたいことが伝わった！と思い我々のテンションも上がりました。

おかげさまで今回は、過去一番の売上を記録し満足の行く結果で終わることができました。

次回は来年2月の大阪で開催されるゲームマーケット2022大阪に参加予定です。
「HELLO WORLD」がたくさんの人の見て触れていただけますように…！

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はＷＥＢデザインをテーマにしている第0ユニットです。

今回のテーマは「CMS」について深堀していきたいと思います。

過去の技術者ブログで「WordPress」をご紹介しましたが、WordPressもCMSの一つになります。

CMSとは…
「Contents Management System：コンテンツ・マネジメント・システム」の略となり、web制作に必要な専門的な知識が無くても、WEBサイトやコンテンツを構築・管理・更新できるシステムとなります。

例えば、今読んでいただいているダンデライオンズのブログ。
これもCMSのWordpressを使用しております。

テンプレートを選んで、画像を選択するだけで皆さんに見ていただいている画面とブログを書いたり管理したりする画面を簡単に作ることができます。
実際に、このブログも30分もかからずに作ることができました。
上の画像の矢印ボタンや右下にある検索もついてきます。
我々SEが実際に1から作ると、画面を作成して、各機能を作って…となるためCMSで作る時間よりも何倍以上の時間が掛かってしまいます。

また、本来であればWEBサイトを構築しようとすると、HTMLやCSS、javascriptといった技術が必要となりますが、CMSを使うことで上記技術がなくても構築することができます。
また、簡単に更新ができること、インターネット環境があれば構築ができることなどがメリットとして挙げられます。

2021年時点で世界で一番使われているCMSは「WordPress」で全体の約40%を占めています。そのほかのCMSは数パーセントと断トツで「WordPress」が使われていることが分かります。

さてそんなCMSですが、少し前から「ヘッドレスCMS」という言葉が注目されております。

ヘッドレスCMSとは…
ヘッドレスの「ヘッド」は表示する画面(ビュー)のことを言い、表示する画面がないCMSということになります。
表示する画面を用意してくれないので、自分で用意する必要があります。

ヘッドレスCMSの代表的なメリットはデザインの自由度が上がること、表示速度が上がるなどが挙げられます。

デザインの自由度が上がるとは、通常のCMSでは表示する画面も用意してくれますが、微妙な位置調整などは簡単にはできません。変えられると言ったら画像やフォントのみとなりデザインは固定されてしまうためこだわりたいところはこだわれない、痒い所に手が届かないことがあります。
ヘッドレスCMSでは、自分たちで表示する画面を用意するため好きなようにデザインすることができるため満足のいくデザインで作成することができます。

次に表示速度が上がると書きましたが、皆さんはネットを見ていて画面がすぐ表示されないとイライラしませんか？今は何でもネット経由で行えますが、表示速度が速いのはもう当たり前になってきていると思います。
そんな中、通常のCMSでは表示される画面を毎回生成しているため表示に時間が掛かってしまいます。
ヘッドレスCMSは画面を作っておき、存在するファイルを表示するようになるため画面が早く表示されます。

上記メリットはありますが、通常のCMSとは違って自分たちで作成する必要があるのでHTMLやCSSの技術が必要となってきます。

ヘッドレスCMSで一番有名なのは「Contentful」です。
その他にも、日本で作られた「MicroCMS」やFacebookが開発したAPI「GraphQL」を活用した「GraphCMS」があります。

我々第0ユニットのようにWEBデザインの技術を持った人たちがやるのであれば「ヘッドレスCMS」を使っていくのもイイネ！と思いました。

次回の第0ユニットの技術者ブログもお楽しみに！

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はＷＥＢデザインをテーマにしている第0ユニットです。

今回は第0ユニットが注目しているMonacaについてご紹介をします。

Monacaとはクラウド技術を用いた国産アプリ開発プラットフォームです。

アプリ開発プラットフォームとは、モバイルアプリケーションなどを開発する環境のことです。プラットフォームを利用しない場合、自分で開発環境の構築をする必要があります。

例として、モバイルアプリのAndroidとiOSがあります。Androidでは、Android Studio、iOSではXcodeとそれぞれ開発環境が異なります。特にXcodeではMac環境が必要となるため、Macがない場合はiOSアプリの開発はできません。

また、AndroidとiOSとで使用する言語が異なります。
AndroidはJavaとC++、iOSではobjective-Cの言語を主に使用して開発を行います。

上記の点から、モバイルアプリを作るというだけでも非常に時間とコストがかかるということが分かります。

しかし、Monacaを使用することによって時間とコストを大きく削減できます。Monacaでは環境構築を必要とせず、ブラウザのみでの開発が可能となります。アプリごとに環境を用意する必要はありません。そのためMac環境がなくともWindowsPCだけでiOSアプリの開発ができます。

異なる言語を使用することもなく、Web標準技術(JavaScirptとHTML5)だけでiOS、Android向けのモバイルアプリ、Windows、macOS、Linux向けのデスクトップアプリ、そしてブラウザ向けのPWAアプリを開発することができます。
Monaca特有の知識は不要なので簡単に様々なアプリを作成することが可能です。

上記画像はMonacaの開発画面です。
右側で作成したアプリの動作確認をすることができます。
また、スマートフォンにアプリを入れて認証すると、スマートフォンでの動作確認も可能です。

公式にも開発に関する情報が画像付きで掲載されていますし、Monacaを使用されている方も多いため困ったときにも調べやすいです。

お手軽にアプリ開発ができるMonacaですがランニングコストがかかります。
我々第0ユニットのようにHTML、CSS、javascriptに慣れているメンバーでアプリを開発するのであればコストを掛けてMonacaを選択しアプリを開発するのも良いと思いました。

今回はMonacaについてご紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに！