先日、弊社のコーポレートロゴ、サービスロゴが新しくなり、
ロゴの他にファビコンも差し替えました。

その際に、ファビコンについてブラウザのタブに表示されるぐらいの認識しかなかったので、
詳しく調べてみようと思いました。

ファビコン（favicon）とは？

ファビコンは「Favorite Icon」の略で、Webブラウザのタブやブックマークや検索結果に表示される小さな画像です。
Webサイトをブックマークする際や、複数のタブを開いているときに、ファビコンは瞬時にサイトを認識するための視覚的な目印になります

Webブラウザのタブ

ブックマーク

検索結果

ファビコンの重要性

ブランド認知の向上

ファビコンは、ウェブサイトのブランドを視覚的に強調するための強力なツールです。
シンプルで覚えやすいアイコンは、ユーザーがタブやブックマークからサイトを素早く認識できるようにします。

信頼性の向上

ファビコンが設定されていないサイトは、未完成や信頼性の低いサイトと感じられてしまうことがあります。
特に商業サイトやブログでは、ファビコンがあることでプロフェッショナルな印象を与えることができます。

ファビコンの作り方

ファビコンはツールを使って簡単に作成できます。
以下は主な作成ツールです。

• オンラインジェネレーター
  Favicon.ioやReal Favicon Generatorといったツールを使うと、画像をアップロードするだけでファビコンを生成できます。
• デザインソフト
  Adobe PhotoshopやIllustratorなどのグラフィックデザインソフトを使って、自作のアイコンを作ることも可能です。
  ファイルを作成したら、ICOフォーマットに変換します。

ファビコンの最適なサイズとフォーマット

ファビコンのサイズやフォーマットは、ウェブブラウザやデバイスによって異なるため、
適切なサイズで複数のフォーマットを用意することが大事です。

※.ico形式だけでも多くのブラウザで対応可能ですが、
より高品質で柔軟な対応を求める場合は、.ico形式とPNGやSVGなどの形式を併用して、
各デバイスやブラウザに最適化するのがベストです。

ファビコンがSEOに与える影響

ファビコン自体が直接的に検索エンジンに影響を与えることはありませんが、
ユーザーエクスペリエンスに関しては間接的にSEOに貢献する可能性があります。

クリック率の向上

ファビコンが適切に設定されていると、ユーザーがサイトをより覚えやすくなり、
再訪問やブックマークからのクリック率が上がることがあります。

信頼性の向上

特にスマートフォンのホーム画面に追加された場合、
ファビコンがしっかり表示されていることで信頼性が高まります。

まとめ

ファビコンは、小さくても大きな影響力を持つウェブサイトの重要な要素になります。
ブランドを視覚的に認識させ、プロフェッショナルな印象を与え、
ユーザーのエクスペリエンスを向上させることができます。

設定方法も簡単なので、まだ導入していない方はぜひ導入してみてください。

はじめまして。
この度、開発職として中途で入社しました佐藤と申します。

前職では受託開発というかたちで、経費精算やヘルスケア領域などのWEBアプリケーション開発に従事していました。

主に以下のような点に惹かれ、かつご縁がありこの度はグリニッジに入社することと相成りました。

• 事業会社ということもあり、エンジニアもユーザーファーストの意識を持っていること。
• フルスタックエンジニアとしての経験ができそうであること。
• 職場の雰囲気が良いこと。（一番の決め手です）

私は「何をやるか」より「誰とやるか」に重きを置いています。
好きな人とであれば、なんでもできるような気がします。なんでも挑戦できるような気がします。
勇気、モチベーション、パフォーマンス、忍耐力―――心の奥底からパワーが沸き上がる感覚ですね。
もちろん、私だけでなく、私が皆さんにもパワーをお裾分けできるような存在になりたいと思います。
グリニッジの皆さん、どうぞよろしくお願いいたします！

また、エンジニアという枠に囚われずに、ビジネスサイドも意識したエンジニアリングに力を入れていきたいです。
グリニッジの企業価値向上へ向けて、目の前のキーボードを叩いていきたいと思います。

仕事もプライベートも
やりたいことがたくさん。
けど時間が足りない…！

そんな時、時間を有効に使うには
スケジュール管理が不可欠！
ということで、タスク管理をしようとしたものの
こんな失敗をしたことは、ありませんか？

タスクの規模が大きい
^{タスクがざっくり曖昧すぎてしまうと…}

工数や作業時間が読めない
何から着手したらいいかわからない
結果、思っていたより時間がかかってしまい
タスクを予定通りに完了できない。

一度はこんな失敗したこと
あるんじゃないでしょうか。

こういった結果にならないためにも
タスクブレイクダウンをおすすめします！

タスクブレイクダウン(TB)とは？
タスクを細分化して
効率を上げる手法です。

具体的には、以下の3ステップを行います。

STEP 1 　完了までの流れを決める
STEP 2　 流れで必要な作業を洗い出す
STEP 3　作業に必要な時間を見積もる

このステップを考える時は、7W1Hを使います。

いつまでに（When）
どこで（Where）
誰が（Who）
誰に（Whom）
何を（What）
なぜ（Why）
どれから（which）
どのように（How）

細分化することで、完了までの流れと
必要な時間が明確になり
より現実的な時間管理が行えます。
あとは細分化されたタスクに、集中するだけです！

この手法のよい点は、大きいタスク完了までには
時間がかかりますが、細分化されたタスクであれば
タスク完了数も増え、短いスパンで達成感が得られ
モチベーション維持がしやすいところです。

今回は、タスクブレイクダウンについて
紹介させていただきましたが、タスク管理方法について
グリニッジのスタッフblogの投稿でも紹介されていたり
チームやプロジェクトでも、日々タスク管理が行われています。

タスク管理方法は、他にもいろいろあるので
他の手法も取り入れ、個人のタスク管理能力を高めることで
時間を有効に使っていきたいです！

Material Design とは

https://m3.material.io/

Googleのデザイン原則

Googleが2014年に提唱したデザインシステムです。一貫性のあるデザインで、直感的に使えるユーザーインターフェースを提供することを目的としています。
色や部品のデザインから、余白など配置の仕方まで、UIのあらゆる観点について具体的な数値が定義されています。

色であれば役割を定義しており、有彩色系(Primary / Secondary / Tertiary)と 無彩色系(Neutral / Neutral variant) の5つの役割と、それぞれの明るさを調整したカラーパレットがあります。
マテリアルデザインでは任意の一つの色から自動的にカラーパレットを生成することもできます。

Material Design のメリット

汎用性が高い

ユニバーサルなデザイン
Googleが提唱しているということもあり、世界中の言語に対応していること、視覚障害などを持つ方でも見やすくする工夫がされていることなど、あらゆる人が使いやすいデザインとなっています。

さまざまなデバイス・アプリで使えるデザイン
デバイスの汎用性も高く、スマホやタブレットなどさまざまなデバイスを利用しても、見た目や使い勝手が同じように使えるデザインになっているため、ほとんどのアプリで適用できます。

設計・開発ツールが充実

Figma

Figmaでは「Material 3 Design Kit」というデザインキットがあり、デザインファイルを開くとこのようにシートの中に既に各部品が用意されています。これらをデザインシート内に取り込めば、Figma上で簡単にマテリアルデザインを使用することができます。

開発ツール (Flutter)
Googleが開発したFlutterではマテリアルデザインが標準でついているため、部品などを配置した際にマテリアルデザインの仕様で作られるので、マテリアルデザインを取り入れながらアプリ開発をすることができます。

デザイントークン
UIの管理や更新をしやすくするために色やフォントなどのスタイルプロパティを階層で関連付けており、開発とデザイナーの共通言語となって連携がとりやすくなります。

Material Design の注意点

膨大で前提知識が必要
優れたUIデザインを実装できるマテリアルデザインですが、事細かなUI資料の量は膨大で、日本語版もありません。また、これまでのマテリアルデザインのバージョンでの前提知識が必要になる場合もあり、UIの基本知識をある程度理解している必要があります。

どれも似たデザインになってしまう
マテリアルデザインに頼りすぎると、似たようなUIデザインばかりになってしまいます。
デザインの一貫性を保つという点ではいいかもしれませんが、そのアプリとしてのオリジナリティは損なわれてしまう可能性があり、参考にする際はどこまで取り入れるか注意が必要です。

Material Design のUIの考えかた

画面の中は3次元空間

画面のユーザーインターフェースは、表面(X軸 / Y軸) と高さ(Z軸) があるという概念です。手前に高さがあり、高さ方向へUIが積み重なっていくような考え方です。
スマホの画面自体は平面ですが、手前側にモーダルなどの部品を重ねることによって空間を作っていき、Z方向の空間を再現していきます。マテリアルデザインの中では z-axis と書かれています。

マテリアルデザインの紙

現実で実在する「紙」という物体が、重なったりすることで画面の中で空間を再現するという概念です。ここでいう紙とはボタンやヘッダー、カードなどの各要素を指します。すべての紙は1dpの厚みであり、厚み自体は変わらないという考え方です。
また、重なるときは影があり、手前に部品が上がったときには、影が大きくなっていくなど、影の適用についても書かれています。

左図は正しい例ですが、右図は影の入れ方としてはNG例になります。高さの位置が変わっていない場合は影をつけてはいけない、という例です。

こちらはユーザーがマウスのホバーなどをしたときは、操作した部分だけにホバー状態が反映されることが適切であり、右図のように紙の枠から突き抜けてはいけないという例です。
また、下にある紙と上にある紙で重なった紙どうしが突き抜けることはない、といったことも書かれています。

このように、現実世界にある物理法則を取り入れることで、ユーザーの直感的な操作を可能にしています。

8dp を基準としたレイアウト

dpは、画面サイズや解像度が異なるデバイスでも同じ大きさに見えるマテリアルデザイン独自の単位です。同じdpを指定すれば、左図の解像度が低いデバイスと右図の解像度が高いデバイスで同じ大きさで要素が表示されます。
ピクセルなどで指定すると画面の解像度が違えば異なる大きさで表示されてしまいますが、dpの場合は解像度に基づいて描画サイズを算出するため、見た目のサイズを統一することができます。

マテリアルデザインでは、8dpのグリッドが基本の間隔とされています。(アイコンやタイポグラフィなどの小さい部品は4dpグリッドになります)
デザインキットのサンプルを見ると、レイアウトグリッドに合わせて要素が配置されており、左右の余白のバランスも取れていることが分かります。

まとめ

今回はマテリアルデザインのベースとなる基本的なUIの考えかたについて一部ご紹介しました。
マテリアルデザインの存在は知っていながら、色や部品ばかりが先行し、その概要や根本的な考えが書かれているドキュメントをしっかりと読み込んだことはなかったため、今では当然の内容も含め改めてマテリアルデザインのUIを構成する概念から学びなおしたいと思っています。
ガイドライン自体はボリュームがあるため時間はかかりますが、サイト内はアニメーションなども豊富にあり回遊しているだけで楽しいです。

優れたデザインについ頼ってしまいたくなりますが、マテリアルデザインはあくまでもガイドラインというひとつの指針として、いいところを柔軟に取り入れて、自分でカスタマイズしながらコンテンツの工夫をし、デザインに独自性を出していくことが重要なのではないかと思います。

背景

弊社ではプロジェクトによってアラートをSlackに通知する運用をしているのですが、自動テストを流すと異常系のテストでSlackに通知が飛んでしまっていたので、これを通知しないようにしたかった。

getMockBuilderで...

PHPで開発を行っているプロジェクトなのでPHPUnitを使用しており、getMockBuilderとかcreateMockとかすればできるだろうと考えていました。

Slackの通知は以下のように行っていました。

<?php

class CheckShimasu
{
	public function noticeShimasu()
	{
		$kakukaku = 'かくかく';
		$shikazika = 'しかじか';
		$kakukakushikazika = $kakukaku . $shikazika;

		$slack = new SlackNoClass($kakukakushikazika);
		$slack->anochannelnitsuchi();
	}
}

なのでgetMockBuilderでこのSlackNoClassをモックにして、テスト対象であるcheckShimasuのnoticeShimasuメソッドをテストしようと思い、以下のように書いてみました。

// slackが1回通知されることのテスト
public function test()
{
	$mock = getMockBuilder(SlackNoClass::class)
			->setMethods(['anochannelnitsuchi'])
			->getMock();
		
	$mock->expects($this->exactly(1))
		->method('anochannelnitsuchi');

	$sut = new CheckShimasu();
	$sut->noticeShimasu();

	$this->assertTrue(true);
}

しかしこれではSlackNoClassはモックにされず、Slackに通知が飛んでしまっていました。
どうやらgetMockBuilderやcreateMockでは、テスト対象のクラスでインスタンス化されるクラスまではモックにできないようでした。

そうですか、できないんですね...

いろいろ調べていたところ、getMockBuilderやcreateMockでもできるよというような内容の記事もいくつかを見つけることができましたが、どうにもうまいことモックすることができず...
最終的にはPHPのモッキングフレームワークであるMockeryを入れて、下記のようにSlackNoClassを「'overload'」とすることでSlackの通知を止めることができました。

// slackが1回通知されることのテスト
public function test()
{
	Mockery::mock('overload:SlackNoClass')->shouldReceive('anochannelnitsuchi')
                                        ->times(1);

	$sut = new CheckShimasu();
	$sut->noticeShimasu();

	$this->assertTrue(true);

    Mockery::close();
}

staticの関数のテストでも簡単にできたりもするようですし、他の外部APIを使用しているところなどもあるので、いろいろ調べながら使っていきたいですね。

以上

1560年（永禄3年）5月19日早朝に起きた「桶狭間の戦い」は、誰もが知る戦いですね。20代半ばの「織田信長」が数千騎の兵で、大軍を率いる「今川義元」軍に戦いを挑み見事、大勝利。この勝利には「奇襲作戦が功を奏した」、「悪天候が味方した」、「偶然の勝利だ」と多くの意見が交わされますが、意外にも現在のビジネスマーケティングの手法「ランチェスター戦略」が活用されている面もあると書かれていたので気になっていたので、読んでみました。

ここ最近、1日が終わるのが早く感じます。
集中して業務に取り組んでいたり、業務量が多かったり、締め切りのある重要な業務があったりで、気づいたらあっという間に夕方になっていたという経験はみなさんもありますよね？

私自身、最近はこれまでの業務に新しい業務がプラスされて、忙しい毎日を過ごしています。
本当は定時に退勤して、そのあとは趣味の時間に充てたり、資格の勉強をしたいのですが、どうしても残業になってしまったり、早く退勤できても疲れて勉強する気になれないことも…

業務量を減らすことは難しいので、業務の効率化や時短をすることでもう少し自由に使える時間を確保できないか？と思っていたところ、ピッタリの書籍を発見！
書かれている時短術をいくつか実践してみたので、ご紹介したいと思います。

“一流は、いつでも返信が早い”

メール送信の傾向を調査した結果によると、仕事ができる一流の社員はメールのチェック頻度が少なく、返信スピードが早いそうです。
例えば打ち合わせの日程調整をする場合、一流の社員はすぐに候補日を送ることで、仕事の流れを自分のところで止めずに、相手の待ち時間を減らすようにしています。

私自身も日程調整の際には、候補日や逆に都合の悪い日時を送るようにすることで、相手が日程を決めやすいように工夫しています。
そうすることで、メールのやり取りの回数を減らすことができますし、相手から返信が来ていないか気になって1日に何回も受信ボックスをチェックしにいく回数を減らすことができています。

“一流は、作成途中で提出先の意見を聞く”

プロジェクトの企画書や会議で使用する資料を作成したあと、上司やクライアントからの修正依頼でイチから作り直すことになって苦労した…という経験がある方は多いのではないでしょうか…？

著者によると、一流の社員は作成途中で相手を巻き込むために、「チラ見せ」をするそうです。
その理由は、相手の納得感と所有感を高めることができ、早い段階でフィードバックを受けられるので質も向上するとのこと。

いっきに最後まで完成させたくなりますが、作成途中の段階で必要な修正点がわかればイチから作り直す手間がなくなるので、効率が良いですよね。
また、イチから作り直すとなるとモチベーションが下がってしまい、作業に取り掛かるのが億劫になってしまいますが、修正箇所を直すだけで良いと思うだけで気持ちもラクになりますね。

さいごに…

その他にも、

・作業ミスを減らすためにITツールを活用する
・重要度と緊急度でタスク管理をする
・タスクが多いときほど“やらないこと”を明確にする

など勉強になる時短術がたくさん紹介されていました。

また先日、他部署のメンバーに自分が普段やっている作業について話していた時、「それってやらなくても良さそうな作業じゃない？」「こうしたら自動化できて手間がかからないよ」とアドバイスをもらいました。
普段やっているやり方に慣れ過ぎて、自分では気づけないことってありますね。
他部署のメンバーだからこその気づき、専門知識を活かしたアドバイスをもらうことができて良かったです。

引き続きいろいろ試して、自分にあった時短術で業務の効率化を進めていきたいと思います！

はじめに

最近、時間の使い方に悩むことが増えてきました。
「本日中にこのタスクも終わらせたかったのに」
「毎日、欠かさず続けたかったことなのに続かない・・・」
「やりたかったことなのに、後回しになってしまう」

毎日を過ごしているうちに、時間の使い方に悩んだことが一度はあるのではないでしょうか。
弊社のスタッフブログでも、よく取り上げられるテーマです。

そんな時、書店で見つけたのがこちらの書籍でした。

仕事だけでなく、プライベートの時間をどう使うかにも参考になりました。
特に参考になったことを2つ紹介いたします。

習慣化で決断疲れをなくす

決断をすることは脳に負担をかけます。

ケンブリッジ大学のバーバラ・サハキアン教授の研究によると、人は1日に最大3万5千回の決断をしています。

目標や夢が達成できる　1年・1 カ月・１週間・1 日の時間術　吉武麻子著

新しく〇〇をやらなければ！という時に、そこには決断が発生します。
新しいことをはじめる際に、既におこなっている他のことを習慣にすることで、決断の回数を減らすことができます。

一度に全て習慣にしようとするのではなく、習慣として既にできていることと結びつけて、小さな範囲で最初は行っていくことが習慣として定着するコツのようです。

振り返りの時間を確保する

計画をたてて実行し、その後やりっぱなしにするのではなく必ず振り返りの時間をとることが重要です。
振り返りの時間と次のプランニングをする時間をセットで確保して、やりたいことがこの計画でできるのかと見直していきます。
1日単位のスケジュールであれば、前日に。
1週間単位のスケジュールであれば、日曜日までに。
1カ月単位のスケジュールであれば、月に1回、自分との戦略会を開いて振り返りを行います。

計画したスケジュールがうまくいっていない時は、時間がない！と慌てている時で、ついつい振り返りをないがしろにしてしまいがちです。
しかし、ぐっと耐えて計画を振り返ることで、その後の計画の見積もりの精度があがり、より良い計画を結果的にたてられるようになっていくのではないでしょうか。

おわりに

時間の使い方は永遠の課題ですね！
振り返りはついおろそかになってしまいがちですが、とても重要なことだと改めて実感いたしました。
担当しているサービスのスクラムイベントでも、1週間の振り返りに現在力をいれています。
この振り返りを頑張れば、次はもっと良い進め方ができるはず！とモチベーションがあがりました。

時間の使い方を見直して、その日の理想通りな仕事ができることを目指していきます！