ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA

コ・デザインのためのシンキングシート

Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gatsby の情報を追うのを止めて、記事だけ追加する運用をしていました。 その頃にはバージョンアップをするより

よく、仕様書を書いていなくて、書いてみたいけど、具体的な仕様書がネット上に落ちてなくってこまってるって相談を受けるので 「仕様書の記載内容のイメージ」を作りました！ ※前提として「現在仕様書を書いていない、自社開発のMVP検証前後のフェーズのスタートアップ向け」に書いています。PMが仕様書、エンジニアがDesign Docを書く分担です。 ついでに、システム開発の基礎である「システム開発のV字モデルをベースにした設計書の紹介」も含めてまとめてみましたー！ 大規模開発に使われたり、古くからあるフレームワークなので、スタートアップの方だと、システム開発のV字モデルの概念やそれにあわせた成果物を知らない人が多いけど、「要件定義書」と「設計書」を全てドキュメント化するとどうなるかを理解した上で、「仕様書」として情報を削る方が、考慮漏れ防止やエンジニアがやっている設計内容の理解につながるので、全体を

本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜

最近作った Slack Bot が好評だったのでまとめてみました！ どこの Slack ワークスペースでも導入できるように詳細に設定方法も記載しています。 🛠 作ったもの tell-me-bot（社内では tell-me-paccho）という、社内用語辞典をいい感じに管理してくれる Slack Bot を作りました。 社内ではもともと Spreadsheet で社内用語を管理していたのですが、メンテナンスする人が限られ、あまり積極的には利用されていない状況でした。 そんな時に@しかじろうさんのこちらの記事を発見して、これはおもしろいアイデアだと思い、Firebase + Bolt（TypeScript）にて作ってみました（アイデアをくれた@しかじろうさんに感謝🙏）。元記事の機能を参考に+αの機能も色々実装しています。 構成 Cloud Functions for Firebase で

本記事の続編として、自分が有害な振る舞いをしないようにする改善の取り組みを扱った記事も書いてます。 エンジニアや上司が"有害な振る舞い"を改善する方法 ※「難しい人」は概念として用い説明するのに便利な言葉でしたが、誤解を生じたり、本記事のポリシーに沿わない使用（難しい人というラベリングを特定個人に適用する使い方）が容易にされてしまいそうだと分かりました。そのような誤用を防ぐことを最優先とするため、代わりに「有害な振る舞い」という表現を使用し、人ではなく振る舞いに着目するタイトル及び文章に変更致しました。 はじめに 以下の記事を読んだ際に「難しい人」という表現が何となく面白い響きで印象に残ったので、これを機に自分の考えを今までの経験をもとに書きたいと思います。 “難しい人”が1人入ると、チームの生産性は30〜40％低下する 対抗せずに、場の「安心感」を作るための3つの条件 - ログミーBiz

このブログはグロースエクスパートナーズ Advent Calendar 2021の10日目です。 社内メンバーから要望があったので、僕自身がどのようにシステム開発の初期段階において、どのように要望を整理し、形にしていっているのかについて書きたいと思います。 なお内容は弊グループの案件を前提にしているので、システム開発は以下のような状況が一般的です。 クライアントは直接契約（プライム） 要望を出すのはクライアント企業内で事業運営側の人で、システム開発にかかわった経験がないことがある 対象システムはSoE/mode2で、一般消費者や取引先などの外部ユーザーと、社内で業務を回す内部ユーザーがいる 相手の話を整理するフレーム まず、相手から得られる情報を4つの階層にわけて整理する必要があります。 目的：達成すべきこと 戦略：目的を確実・効率的に達成するためのシナリオ 戦術：戦略を実行するための具体

この記事は、KLab Engineer Advent Calendar 2021 の25日目の記事です。大遅刻してしまいました、ごめんなさい。 こんにちは。KLabで今年の2月からCTOをしています@hnwです。 CTOに就いて以降、社内のエンジニアの方とお話をする機会が増えました。1on1だったり少人数の会議だったり形式は色々ですが、興味深い話をたくさん聞けて、自分にとっても会社にとっても必要なことだと感じています。 そうした際にエンジニアとしての将来の理想像やキャリアパスといった悩みを聞くことがあります。私もその場で言えることは言っているつもりですが、うまく伝わったか、もっと言えることがあるんじゃないか、とモヤモヤすることがあります。本稿ではそのモヤモヤを「○○問題」として整理してみました。 最初にお断りしておくと、キャリアの話は基本的には個人の問題ですから、あまり他人の話を真に受けす

会社で係長的なポジションになって3年近くが経った。先日、副係長というか職長的なポジションが新たに設けられ、30歳前後のメンバーが就いた。折を見て彼らに伝える機会があるかもしれないし、3年やってみた知見を自分の中で一度整理しておきたいと思った。（大手メーカーの製造側に近い部門で働いている、という前提がある。） 自分が苦しくならないようにする 究極的には本人が自分でスタイルを確立するしかない。 「こうした方がより良い」と思って行動変容しても、それで自分が苦しくなるなら続けられない。 どうせ正解の型が一意に決まるわけではないし、仮に正解の型があっても自分を完全にはめ込むこともできない。 「自分がやれるようにやるだけ」くらいに思っている方が精神衛生に良い。それで不適格ならしょうがない。 一方で「より良い方法」に寄せる努力も必要で、その間のバランスが必要になる。 例えば自分自身は、人付き合いがすごく

この記事はNTTコムウェア Advent Calendar 2021 20日目の記事です。 NTTコムウェアの古西です。AI・データサイエンス推進室で技術マネージャをしています。 システムインテグレーター、略してSIerは、顧客のためにITシステムやサービス・ソリューション・プロダクトを開発・運用する会社です。一部自社サービスがあるものの、特定の顧客企業に対してシステムを提供することが多いです。 ネット上では「SIerはオワコン」1と言われることもありますが、私自身は入社のときに「人と技術を仲介する仕事がしたい」と言って仕事をしはじめてから約25年間、SIerで顧客や自社の人と技術を仲介する仕事をしてきました。私がこれまでの経験から「SIerで幸せな技術キャリア」を築くために意識したほうがいいと思うことを、若年層とベテラン層にわけて3つずつ、書いておこうと思います。 若年層(20代～30代

こんにちは、虎の穴ラボのNSSです。 最近ReactやTypeScriptを勉強中なのですが、Reactで作ったアプリケーションを簡単にデプロイして公開できるツールとして、AWS Amplifyがあります。 AWS Amplifyとは、AWSが提供するモバイルやWEBのアプリケーションを素早く開発することができるプラットフォームです。 AWS Amplifyは、たった数クリックでアプリケーションをデプロイできる他、 コマンドラインツールを使ってユーザー認証やAPIなど、あらゆる機能を簡単にアプリケーションに追加することができます。 今回は、ReactベースのフレームワークであるNext.js と AWS Amplifyを使ったアプリ開発をご紹介します。 環境 Node.js (v16.4.1) Next.js (v10.2.0) TypeScript Node.jsはインストール済みである

Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成

こんにちは、Flatt Security執行役員の @toyojuni です。 弊社はWebエンジニア向けのセキュアコーディング学習プラットフォーム「KENRO(ケンロー)」を提供しています。この度、商談の中で限られたお客様にのみ提供していた「KENRO」のトライアル利用を 無償・期間無制限で一般開放 することとしましたので、そのお知らせも兼ねつつ一般開放に至った背景などをこちらのブログでお話ししようと思います。 「KENRO」とは？ 「KENRO」のトライアルとは？ トライアル一般開放の背景 トライアルはどのような人にオススメ？ トライアルの利用方法 最後に 「KENRO」とは？ 「KENRO」は、Web 開発に必要なセキュリティ技術のハンズオンの研修・学習を行うことができる、環境構築不要のクラウド型学習プラットフォームです。 https://flatt.tech/kenro これまでエ

Scrum Fest Mikawa 2021の登壇資料です。 以下は資料内で引用している参考リンクです DPA https://qiita.com/viva_tweet_x/items/97e819c626979b78947a KPT http://objectclub.jp/download/files/pf/KPT_TIPS.pdf TimeLine https://developers.freee.co.jp/entry/timeline-is-a-good-retrospective-method 象、死んだ魚、嘔吐 https://no-kill-switch.ghost.io/elephants-dead-fish-vomit/ Start Stop Continue https://www.retrium.com/retrospective-techniques/start-

「Scrum Fest Osaka」はスクラムの初心者からエキスパート、ユーザー企業から開発企業、立場の異なる様々な人々が集まる学びの場です。KEYNOTEで登壇したのは、楽天グループ株式会社の椎葉氏。「誰も嫌な思いをしない変化」をタイトルに、自身が開発グループのサポートをしたときの取り組みについて話しました。全3回。2回目は、誰も嫌な思いをしない変化のために実践したことについて。前回はこちらから。 誰も嫌な思いをしない変化のために「相手に期待しない」 椎葉光行氏：その頃の自分と、今の自分でいろいろと変わったとは思うんですけど、大きくこの2つかなと思います。 「相手に期待をしなくなった」それから「相手の気持ちを考えなくなった」です。 言葉にすると、人としてどうなのという感じがしますけど（笑）、でもこの2つが自分の中でけっこう大きな軸になっています。 何年か前に、娘が「2桁のかけ算教えて」っ

サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。

記者に「プログラミングのスキル」って必要なの？ちなみにNHKニュースの画像生成も記者がコードを書いてます 新型コロナウイルスの新規感染者の数を示す日本地図に、毎日厳しい視線を送る男がいる。 コロナの感染拡大の今後が懸念されるが、地図がきちんと描画されているかも気になってしまう。 それはこの「新型コロナ感染者数マップ作画システム」をプログラミングしたのが彼だから。 ちなみに彼は技術部局のエンジニアではなく、いつもはテレビで解説している記者だったりする。 このシステム、記者が作りましたこんにちは、NHK解説委員の三輪誠司といいます。専門はITやサイバーセキュリティで、主に「シブ5時」や「くらし解説」などでニュースの解説を担当しています。 新型コロナウイルスの「感染者数マップ作画システム」は、1週間で作成しました。 言語はJava、地図はSVGで、ブラウザの画面をそのまま放送で使っています。SV

今の世の中は、「言語化する能力」が高い人が、有利に事を運べる。 とくに知的な仕事では、自分の思考を、他者に理解させ、そして動かす力が、とても重要だ。 要求を伝えること アイデアを交換すること 組織や人のつながりを作ること これらすべてにおいて「言語化能力」は、重要であり、「賢さ」の要件の一つであることは間違いない。 実際、かつて私が所属していたコンサルティング会社の組織長は、言語化能力の応用の一つである、「ネーミング」に非常にこだわっていた。 仕事のできる人が「ネーミング」に信じられない程こだわる理由。 人は、名前のないものについて、深く考えることはできない。逆に名前を生み出すことで、新しい概念についても考察できる。 だから、できる人はまず考察の対象の「定義」を考える。 そしてその定義に名前をつける。ネーミングは、思考の出発点だ。 時に、一つの様式の名前を決めるために、延々と数時間を費やす