プロダクトの解像度を上げるとUIの作り方が変わる！〜体験入社からのリベンジ〜｜tebiki ブログ
こんにちは、現場教育システム tebiki のプロダクトデザイナーの山本です。プロダクトのデザインの他に、サービスサイトやコーポレートサイトなどの実装業務も行なっています。 (Tebikiに入社する前は制作会社でWEBサイトのデザインやコーディングを行なっていました) 今回は1つのUI改善業務を入社前に行い、入社後に同じ業務に取り組んだ事例についてご紹介したいと思います。 なぜ、入社前に改善業務を行ったのかTebikiでは選考プロセスの1つに体験入社を行なっており、 デザイナーの選考ではプログラムの一環として、数時間で終わる簡単なUI設計を題材としたタスクトライアルを行なっています。実際に私は下記のプログラム内容の体験入社でUI改善業務を行いました！ 体験入社スケジュール例 11:00 - 11:25 オフィスツアー・メンバー紹介 11:25 - 12:00 課題の説明 12:00 - 1
TypeScript で仕様が一目瞭然な定数ファイルを書く
オブジェクトの中に、定数をフラットに列挙しただけの定数ファイルを書いていませんか？ 私は、フロントエンドの開発において、 JavaScript の簡潔なオブジェクト記法 TypeScript による型チェック / IDE 等による入力補助 を活用した保守性の高い定数ファイルの書き方を日夜研究しているので、4つのポイントに着目して解説しようと思います。 この記事で求める「保守性」 網羅的に視認しやすいこと 会社/文化によって異なるかも知れませんが、 「全てのフィールド（ラベル・説明文・バリデーションエラー文言）」のような情報が仕様ドキュメントの中でまとめて管理されている状況では、コードの側でも文書の構造に合わせて情報をまとめて配置すれば、仕様と実コードを見比べるのがラクになるのかな...？と考えています。 また、単純に仕様上重要な情報がボリューミーなコードの中に埋もれやすいので、定数ファイル
Qwikの紹介 – HTMLファーストのフレームワーク | POSTD
Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 出力されるコードは速度が最適化されています。 私たちのツールで作成されたサイトは、手作業で作成されたサイトの大部分よりも高速です。 私たちはこれを心から誇りに思っています。 私たちの製品は、スピードがとても重要であるeコマースに焦点を当てています。 優れたTime to Interactiveの実現は困難 どんなにコードが最適化されていても、静的HTMLのみを提供していない限り、 eコマースサイトがPageSpeed Insightsで100点中100点のスコアを
CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか
UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的なテクニックについても解説されています。 Inside the mind of a frontend developer: Hero section by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装するヒーローコンポーネント HTMLの構造を考える グラデーションの背景 疑似要素 スマホでの表示を考える ヒーローの最小高さ 配置のためのCSS Gridとその際の課題 コン
【Web】知っておきたいWebエンジニアリング各分野の基礎知見80
この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W
お絵かきAI、育児で活躍 “無限塗り絵”に4歳も夢中
「Midjourney」「Stable Diffusion」など、テキスト（呪文）を入力するだけで、イメージに合った美しい絵を出力してくれるお絵かきAIが、にわかに盛り上がっている。 描き込まれた絵画調の作品や、アニメ風のイラストなどに注目が行きがちだが、他にもさまざまな可能性が広がっている。例えば、子供用の塗り絵を無限に生成する、などだ。 「Midjourney」や、その派生版「niji・journey」で、さまざまな作品を作っているブロガーのkobeniさんは、これらを使って線画の"塗り絵”をたくさん作り、記者の娘（4歳）にプレゼントしてくれた。 娘は、プリンセスの塗り絵に「かわいい」と大興奮。色鉛筆を手にとり、夢中で塗っていった。 kobeniさんによると、塗り絵を作るための"呪文”は、「線画」「色なし」「子供用の塗り絵」「白背景」「白地に黒のはっきりとした線」「細かい書き込み」 「
AWS、Docker Desktop代替となり得る「Finch」をオープンソースで公開。ローカルマシンに仮想環境とコンテナランタイム、ビルドツールなど一式を導入
AWSは、ローカルマシン上にLinuxコンテナのランタイム、ビルドツール、コマンドラインツールなど一式を簡単にインストールし、コンテナを用いた開発環境を開始できるソフトウェア「Finch」をオープンソースで公開しました。 Today we are happy to announce a new open source project, Finch. Finch is a command line client for building, running, and publishing Linux containers. Learn more in this blog from @estesp and @ChrisShort https://t.co/5qDdio806E#AWSCloud #containers #opensource pic.twitter.com/TDfcYlwwIs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
