技術者ブログ-デザインの4原則-

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は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/

技術者ブログ-サイト運営

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

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

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

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

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

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

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

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

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

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

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

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

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



ゲームマーケット2021秋に参加しました

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

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

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

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

高速に乗りますよー!

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

ビッグサイトの形って不思議です…。

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

設営完了!

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

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

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

実際に触れてもらって知ってもらいます。

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

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

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

技術者ブログ-CMS深堀

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はWEBデザインをテーマにしている第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ユニットの技術者ブログもお楽しみに!

技術者ブログ – Monaca

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はWEBデザインをテーマにしている第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を使用されている方も多いため困ったときにも調べやすいです。

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

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

社員紹介(2-2)

閲覧ありがとうございます!
今回の社員紹介記事を担当します「やまぐーち」です。2度目となります。

前回の投稿(コチラ)では、簡単な紹介をさせていただきました。

今回は少し趣味に関してお話しさせていただければと思います。

皆さんはコラボカフェをご存知ですか?

アニメやゲーム、キャラクターと飲食店がコラボしているものです。食べ物や飲み物でキャラクターを表していたり、食べ物や飲み物を頼むとそのキャラクターの特典がもらえたりします。

やまぐーちも、ハマっているゲームやアニメ、好きなキャラクターのコラボカフェによく行ってます。

特典に種類がある場合は、コンプリート目指して通ったりしています。

最近行ったのはひつじのショーンカフェです!

お店の中のBGMがアニメで流れているものだったり、各席にショーン達のぬいぐるみがありとても素敵な空間でした…!

今回はアニバーサリー記念ということで、アニバーサリープレートとメロンソーダを注文してみました。

写真のコースターと、ランチョンマットが特典でした!ランチョンマットは大きさから持ち帰りは断念しましたが、コースターはばっちりもらってきました。

とても素敵な空間に、癒されました!

次はどのコラボカフェに行こうか計画を立てたいと思います。

次の社員紹介もお楽しみに!

歓迎会を行いました

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

今回は新型コロナウィルスの影響により行えていなかった歓迎会を10月末日行いました。

ダンデライオンズは今年4月に3名、6月に2名、10月に2名と新しいメンバー7人が増えました。

まだまだ新型コロナウィルスの影響もありましたので、「完全個室」「大皿ではなく一人一皿」「ソーシャルディスタンスが確保された席」を意識してお店選びを行いました。
もちろんお店に入る前に検温&アルコール消毒も実施済みです。

少し前とは違った雰囲気の中、歓迎会がスタートしました。

新しいメンバーはそれぞれの場所で、緊張しながらも他の社員と会話できていました。
仕事の話から、最近の近況やお互いの趣味などを話していました。

中盤には新しいメンバーによる自己紹介をしてもらいました。
緊張しているメンバーもいれば、お酒が入っいてるからかスラスラ話せるメンバー、パンチのある発言をするメンバーなど個性あふれる自己紹介で場は盛り上がりました。

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

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

2020年インターンシップ体験談①

※5~6月に、外国人留学生の方にインターンシップに参加していただきました。
当記事では、参加者の方の体験談を紹介していきます。

フランス人留学生(女性)

この度、株式会社ダンデライオンズの5・6月のインターンシップに参加しました。

この間でさまざまなプログラミングのソフトウェアを紹介してくださったり、 ショッピングサイトの業務を体験したり、日本のビジネス文化を身に付けたりしました。

最初は、紹介されたプログラミングを初めて使ってみましたが、基本のツールやタグなどの使い方や新しい専門用語を身に付けることに挑戦しました。様々な基本講座のおかげで、たくさんの知識を学ぶことができました。
言語についてだけでなく、プログラムの使用方法についても学ぶことができました。
他にも、プロモーションサイトなどを作成するためにブレーンストーミングでアイディアを出して、とても面白い体験ができました。

アイディア出しの様子

また、セミナーや会議室までのご案内を通じて、日本のビジネスマナーを勉強しました。
フランスと違う点がいくつかあり、失礼なことを言ってしまわないかと、会議室まで
ご案内したときには緊張しました。

身嗜みレクチャーの様子

理解ができなかった際には、皆様が分かるまで丁寧に説明してくださいました。
非常にありがたかったです。

今回のインターンシップに参加してよかったです。

DRESS&GROOMING -身嗜み-

こんにちは。やまぐーちです。
今回は、他の会社にはない、少し変わった新入社員研修を行いましたので、そちらの様子を書きたいと思います。

2020年5月27日(水)に、「身嗜み」研修を行いました。

Brilliant Impressionの森内様に講師をしていただき、座学とスーツ選びを行いました。

森内様は、ご自身の経験から「マナーと服装で扱いが変わること」を痛感し、また「立場と外見が一致しないこと」もったいないと感じたことから、Brilliant Impressionを設立されイメージコンサルタントを行っている方です。

そんな森内様をお招きして、まずは座学として「正しい身だしなみセミナー」を学びました。「外見の重要性」や「身だしなみのルール」、「ビジネススタイルの基本」「カジュアルダウンの方法」などを学びました。

例えばスーツであっても、色や柄、中に着るインナーなどお店に売っているからと着てしまうと「ビジネススタイル」から外れてしまうことがあります。
どんな色・柄なら良いのか、ダメなインナーは何か。などを教えていただきました。

また、オフィスカジュアルとカジュアルの境目で具体的にどんな服装までならよいのか、どのアイテムが良いのか悪いのかなどを教えていただきました。

話を聞いている間の新入社員は目をキラキラさせながら、楽しそうに森内様の話を聞いていました。

座学後、ONLY 名古屋広小路店様にお邪魔して各自に合ったスーツを選んでいただきました。
既製品から選ぶ人、オーダースーツで選ぶ人がおりどのチームも楽しそうに選んでいました。

既製品チームは、自分に合った色や柄だけでなく、スカートの形などでスーツを選んでいただきました。鏡の前で合わせるだけではわからないため、様々なスーツを試着して森内様からアドバイスをいただいていました。

オーダースーツチームは、採寸から生地やボタン選びなど、どの組み合わせが良いかを森内様に伺いながら決めていきました。生地、裏地、ボタンは種類がたくさんあり考えるのがとても楽しそうでした。

では、結果を見てみたいと思います。
まずは、本人たちが持っていたスーツ姿です。

最終的に選んだスーツ姿です!

「就活生」ではなく「社会人」に、かつ「スーツに着られている」わけではなく「自分に合ったスーツ」になっていますよね!
スーツを着た姿を見たときは「さすが、イメージコンサルタント!!!」と思いました。

今回はダンデライオンズとしても初めての「身嗜み」研修で、同席させていただいた社会人1X年目のやまぐーちもとても勉強になりました。
是非今回の内容を活かしていってほしいと思います。

『HELLO WORLD 』大会 2020!

先日、このブログで予告しておりました、「HELLO WORLD」の大会を行いました。

HELLO WORLD

ダンデライオンズで作成したカードゲームで
プログラミング学習を始める前のお子様からでも学んで遊べるゲーム です。

大会の進め方

・各ユニットリーダー擁するアダルトチームと
 新入社員率いるヤングチームでチーム分け
・チーム内で対戦し、先鋒~大将までを決定
・試合は5番勝負で先鋒~大将の順番による1対1の勝負を行い、
 多く勝ったチームの勝利

大会の結果

5戦で勝負が決まると思っていましたが
戦いが白熱したことにより、中堅戦でまさかの同時上がりが発生し結果は引き分けに…。
勝敗は延長戦までもつれ込み、両チームの代表者による6戦目を行いました。

結果は…新入社員ヤングチームの勝利でした!!!

HELLO WORLDのターゲットはプログラミング学習を始める前のお子様ですが、
プログラミングを理解している大人でもとても楽しめるゲームとなっているため
大会中は全員が大盛り上がりでした。

HELLO WORLDはクラウドファンディングを計画しており、いよいよ販売スタートです。

次回の社内コンテストも HELLO WORLDの販売もお楽しみに。