「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント｜Tomoyuki Arasuna
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
CSS Gridを使用して、Webページでよく使用されるレイアウトやコンポーネントの実装で起きる問題を解決する実装テクニックを紹介します。 Modern CSS grid solutions to common layout problems by Kevin Pennekamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 動的な中央揃えのレイアウト レスポンシブ対応のマルチコラムのグリッドシステム 2方向のカードレイアウト まとめ はじめに レイアウトと構成は、CSSにおいて最も難しいポイントに一つです。特にレスポンシブを考慮する場合は、なおさらです。最近では、メディアクエリを使用しない実装が増えています。これはさまざまなブレイクポイントを使用することで、CSSの保守性が低くなるからです。 しかし、CSS Gri
kz（livetune）が考える、VTuber文化ならではの魅力「僕らが10年かけたことを、わずか2年でやってる」 2017年12月にある種のブレイクポイントを迎え、以降急速に発展してきたバーチャルYouTuber（VTuber）シーン。勢力図が次々に変化し、企業が積極的に介入するなど、何かと騒がしいこの界隈を、リアルサウンドテックでは様々な方向から取り上げてきた。 活動の場もYouTubeのみならず、さまざまなプラットフォームへと変化し、もはや“バーチャルタレント”と呼ぶべき存在となった。そんな彼ら彼女らについて、もう少し違った角度から掘り下げてみるべく、シーンを様々な視点から見ているクリエイター・文化人に話を聞く連載『Talk About Virtual Talent』がスタート。第一回は、J-POP・アニメシーンで幅広く活躍しつつ、キズナアイやYuNi、にじさんじなどに楽曲提供も行っ
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 完成したデザインをWebサイトとしてWebブラウザーに表示するためには、コーディングが必要になります。 コーディングを勉強中だったり、コーディング経験がまだあまり多くない方によくある悩みとして以下のようなものがあります。 どこから作業を進めていけばいいのか分からない同じようなスタイルを持ったclassが増えていってしまうスマホサイトのデザインが用意されていない時にどうすればいいのか分からない こ
モバイルファーストとデスクトップファーストの現状、それぞれのワークフローを解説し、今日のレスポンシブ対応のレイアウトを実装するより良いアプローチ方法について紹介します。 ビューポートサイズとは関係ないすべてのデバイスで共通の基本スタイルを優先的に記述する方法、メディアクエリを使用しない方法、モバイルとデスクトップの違いを考慮する必要がない方法など、最新の実装テクニックも解説します。 The State Of Mobile First and Desktop First by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モバイルファースト・デスクトップファーストとは何を意味するのか モバイルファーストのワークフローはどうあるべきか デスクトップファーストのワークフローはどうあるべきか スコ
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. Web制作お役立ちツール 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. アイコン素材パック 7. デザインコレクション 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Fresh Folk スタイリッシュなイラストを作成で
コロナ禍でも問題なし！フルリモートIoT案件（副業）をbalenaを使って完遂しました。 - 僕のYak Shavingは終わらない
開発環境 ＜2020/09/21 9:24 追記＞ %s/渦/禍/g— kazuph@-12kg達成！ (@kazuph) 2020年9月20日 ありがとうコロナ渦警察 ＜追記終わり＞ はてブロではお久しぶりです。 この度「フルリモートIoT案件」をbalenaを使って完遂したので、その内容を共有したいと思います。 先に書いておきますが、「技術書典9でbalena本書いたから買ってほしい」という願望により書かれた記事ですｗ （セルフPR） 案件内容 詳しくは書けませんが、友達のベンチャーのIoTデバイス（抽象的表現）用のゲートウェイとスマホアプリとそれをつなぐクラウド部分を担当しました。 その会社には組み込みより下のレイヤーのメンバーしかいない状態だったので、今回は組み込みより上を担当した感じです。 本来であれば、IoT案件となると、開発中の試作品の目の前でうんうんうなりながら開発すると思
技術部の笹田（ko1）と遠藤（mame）です。クックパッドで Ruby (MRI: Matz Ruby Implementation、いわゆる ruby コマンド) の開発をしています。お金をもらって Ruby を開発しているのでプロの Ruby コミッタです。 本日 12/25 に、ついに Ruby 3.1.0 がリリースされました（Ruby 3.1.0 リリース ）。今年も Ruby 3.1 の NEWS.md ファイルの解説をします。NEWS ファイルとは何か、は以前の記事を見てください。 プロと読み解く Ruby 2.6 NEWS ファイル - クックパッド開発者ブログ プロと読み解くRuby 2.7 NEWS - クックパッド開発者ブログ プロと読み解くRuby 3.0 NEWS - クックパッド開発者ブログ 本記事は新機能を解説することもさることながら、変更が入った背景や苦労な
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール Web制作フ
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
技術部の笹田です。今日保育園に娘を送りにいったら、娘が先生に「サンタさんにプレゼントもらったよ！ お母さんもプレゼントもらってたけどお父さんはもらってなかった！」と報告しており、私だけが悪い子と保育園に伝わってしまいました。 2021年は、笹田は Ruby 3.1 に導入された debug.gem （ruby/debug: Debugging functionality for Ruby）に結構長い時間をかけました（かけてしまいました）。だいたい半年で終わるだろうと思ってたんですが、終わらず。Ractor をもっとやる予定だったんだけどなぁ。ソフトウェア開発の見積もりは難しいですね。 本記事では、debug.gem について、導入の背景、簡単な使い方、それからちょっと面白い機能までご紹介します。 youtu.be （本稿では動画をいくつか載せていますが、動画作成時と記事執筆時が違うので、そ
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ
※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。 記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。 前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。 そこで今回2021年に向けて内容を見直しました。 最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan
![【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/69fd58e599edd140a8c7e26e7058d9122c7ed7a1/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20201207%2F20201207184733.png)
この記事では、ウェブサイト制作をより手軽で簡単にする最新CSSライブラリをまとめてご紹介します。制作時間の短縮はもちろん、新しく登場するCSSの学習ガイドとしても最適です。 ウェブ制作に携わるすべてのひとにオススメしたいお役立ちツールが揃っており、多くはGitHubよりセレクトされています。これらのツールを使わないにしても、CSSの可能性を学ぶことができるでしょう。 これは便利！ウェブ制作がサクサク捗る新作CSSライブラリ、ツール15個まとめ CSS Wand CSSをベースとしたアニメーションをボタンひとつでコピペできるシンプルなCSSライブラリ。思い通りにカスタマイズできるので、ボタンや入力フォーム、ローディングアニメーションなどを素敵にしたいときに試してみましょう。 Water.css その名の通り、「水（Water）を加えるだけで」、ウェブサイト制作の雛形として利用できるCSSフレ
テクノロジー部門CTO室の笹田（ko1）と遠藤（mame）です。今年の 9 月から STORES 株式会社で Ruby (MRI: Matz Ruby Implementation、いわゆる ruby コマンド) の開発をしています（Rubyのこれからを STORES で作る。Rubyコミッター笹田さん、遠藤さんにCTOがきく「Fun」｜STORES People ）。お金をもらって Ruby を開発しているのでプロの Ruby コミッタです。 本日 12/25 に、恒例のクリスマスリリースとして、Ruby 3.3.0 がリリースされました（Ruby 3.3.0 リリース）。クックパッド開発者ブログで連載していたように、今年も STORES Product Blog にて Ruby 3.3 の NEWS.md ファイルの解説をします（ちなみに、STORES Advent Calendar
デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見たり、社内のデザインシステム整備の仕事をやったりしています。 さて、2021年に開催した弊社カンファレンス #pixivdevmeetup にて発表しましたデザインシステムの Web 版実装が先日 OSS 化されました 🎉 1。GitHub と npm から利用できます。 github.com www.npmjs.com 発表時点では「pixiv-elements」という名称でしたが、公開にあたって「charcoal」という名前になりました。「charcoal（木炭）」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。 （ただし、npm パッケージのスコープは
戦史の探求 戦史の情報を整理し探求するサイトです。 古今東西の全てを対象とし、特に戦況図や作戦図に着目しながら戦略・作戦・戦術について思索します。 軍事的文脈おいて全滅とは部隊の3割が死傷したことをいう、という言説は一般にまで浸透しつつあるようです。ただこの言説が何を根拠に言われているのか辿るのは難しく、かなり朧げなものです。この言説は日本だけでなく諸外国でも類似的なフレーズが広まっており、確かに軍人にもそれを使う者はいますが公的な一致は無いというのが実情です。 本拙稿は誰が言い始めたかという起源調査ではなく、実戦データの統計を見ることでこの死傷率N％で機能喪失の言説がそもそも正しいのか、実戦の運用に足るものなのかをテーマとします。そのために米国で行われた調査論文の結果を紹介しながら書いていきたいと思います。 戦史を学んでいる人々にとっては予想通りの結果でしょうが、調査の過程で浮かび上がっ
Visual Studio CodeのJava環境が強化。Call Hierarchyで呼び出し元を次々にドリルダウン、変数が特定の値になると自動停止するデバッガ新機能など
Visual Studio CodeのJava環境が強化。Call Hierarchyで呼び出し元を次々にドリルダウン、変数が特定の値になると自動停止するデバッガ新機能など マイクロソフトが開発している無償のコードエディタ「Visual Studio Code」におけるJava開発環境の機能強化が発表されました。 Happy New Year and welcome back to our first update of #Java on VS @code in 2020! “Call Hierarchy” and compact folder view will help Java developers a lot. Debugger and Test Runner updates along with performance improvements are also worth ch
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。 実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。 2019年に登場した最新オンラインツール一覧 以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。 ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ ウェブデザイン制作が加速中！便利な最新オンラインツ
健常者エミュレータ事例集Wiki 集合知を構築しよう トップページページ一覧メンバー掲示板編集 結婚式をやるなら親を呼んだほうがいい 最終更新：ID:NYf8mVE4IA 2022年08月24日(水) 12:39:28履歴 5W1H+Then状況説明 Who(誰が)筆者がWhen(いつ)結婚することを親に伝えたときWhere(どこで)自宅でWhy(なぜ)「まだ結婚するには早すぎる」「相手には会わない」と述べた親の発言を字義通りに解釈しWhat(何を)義親にもその意思を伝えHow(どのように)親を、全てのプロセスから排除して結婚したThen(どうなった)縁が切れた 健常行動ブレイクポイント 通常、親に結婚を反対された場合は、対話に基づく説得を試みて合意が形成されたのちに、両家顔合わせ→食事会→婚姻届への署名→（親らの意見を聞きながら）式場や主賓などの決定→結婚式の準備などを進めていくが、その
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ CSSフレームワークのTailwind CSSが注目を集めています。その特徴は、flex、pt-4、text-centerといったユーティリティクラスの組み合わせだけで、ほとんどすべてのスタイリングをしてしまおうという大胆なアプローチです。これまでのベストプラクティスと真っ向から対立するようなやり方ですが、だからこそ享受できるいくつもの強みがあります。本特集では、そうしたTailwind CSSの考え方や、具体的な使い方について紹介します。 お知らせ：本特集のサンプルコードは、GitHubの筆者リポジトリからダウンロードできます。https://github.com/yuheiy/wdpress133_
デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 | DevelopersIO
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 環境構築 「何もしてないのにできた」を実現するため、この記事ではインストール直後の Visual Studio Code と Node.js を使用しています。皆さんは今まで通りの環境で大丈夫です。 各ツール類のバージョンは執筆時点で最新のものを使用しています。 Visual Studio Code 1.52.1 Japanese Language Pack（任意） Node.js v14.15.3 プロジェクト作成 任意のディレクトリを作成し、初期化して必要なモジュールをインストールします。そして VS Code で開きましょう。 mkdir ts cd ts npm init -y npm install typescript ts-no
弊社では全ての新規サイトの構築で、CSSフレームワークをtailwindcssに切り替える意思決定を行い、実際に1年くらいが経過しました。「案件によって、tailwindが向いてそうなものは使う」ではなく「全ての案件で使用」です。使えば使うほどメリットの大きさを感じていますが、同時にtailwindcssの世界観が世間の常識とあまりにも違うため、社内のスタッフには少なからず戸惑いがまだ残っているように思います。 そこで、改めて「なぜtailwindcssを使うと効率的にサイトが構築でき、メンテナンス性が上がるのか」反対に「tailwindcssを使う上で、やってはいけないことは何か」についてまとめたいと思います。 tailwindcssとは tailwindcssとは、2020年11月にバージョン2.0がリリースされたばかりの、今注目のCSSフレームワークです。CSSフレームワークといえば
【意外と教わらない】Webデザイナーなら知っておくべき画面サイズのお話。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのまいまいです🦀 みなさん、駆け出しのWebデザイナーのころってどんなことを学びましたか？ デザインツールの使い方、フォント、レイアウト、配色、コーディング、etc……。 いろんなことを学びますよね。今回は、「めちゃくちゃ大事なのに言葉でサラッと説明するのが難しい」「はじめからきちんと理解しておけば……」と私が感じた画面サイズについて書きます！ 独学でつまずいていませんか？ Webデザインの基本を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 カンバスサイズ PhotoshopもしくはXDやFigmaでデザインをつくると
CSSフレームワークのブレイクポイントを比べてみた(Bulma, Vuetify, Element, Bootstrap, etc..) - Qiita
だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀) ちなみに単位はpx。収まらなかったので省略... 調べたのはこの7つ Bulma ... Responsiveness | Bulma Bootstrap ... Overview · Bootstrap Material Design ... Responsive layout grid - Material Design Vuetify ... Breakpoints — Vuetify.js Material-UI ... Breakpoints - Material-UI Element ... Component | Element Tailwind CSS ... Breakpoints - Tailwind CSS Material DesingはCSSフレームワークではないけど参考として。
リンク 健常者エミュレータ事例集Wiki 女性が問題解決を求めて相談してくることもある - 健常者エミュレータ事例集Wiki 5W1H+Then状況説明Who(誰が)私がWhen(いつ)学生の時Where(どこで)研究室でWhy(なぜ)女性は共感を求めているという話を聞いたことがあったのでWhat(何を)「昨日突然PCが壊れた」という相談に対してHow(どのように)... 2 users 引用 健常行動ブレイクポイント 共感を求めているのか解決を求めているのかはコンテクストを読み解く必要がある。 どうすればよかったか それは困ったね、修理に出したの？サポートに連絡したの？という受け答えが正しいと思われる。 備考 彼女の知り合いの中では私が一番PCに詳しいからこの話をしてるんだということだった。 インターネットの有名な「車のバッテリーを確認する男女コピペ」を回避しようとしたつもりだった。 B
えっちな同人音声を、安易に自身の声で販売するべきではない - 健常者エミュレータ事例集Wiki
健常者エミュレータ事例集Wiki 集合知を構築しよう トップページページ一覧メンバー掲示板編集 えっちな同人音声を、安易に自身の声で販売するべきではない 最終更新：ID:BwsFDR5ahQ 2023年01月26日(木) 15:56:18履歴 5W1H+Then状況説明 Who(誰が)私がWhen(いつ)社会人のときWhere(どこで)インターネット上でWhy(なぜ)友人に「お前の声で抜ける」と言われたからWhat(何を)えっちな同人音声の演技指導用に、自分自身の声で録音した音声ファイルをHow(どのように)大手ダウンロード販売サイトで、予定していたタイトルに「○○○○（自主規制）男子」を付与して販売したThen(どうなった)予想以上に多くの人から支持を集め、情緒がめちゃくちゃになった 前提条件 ・筆者、友人共に男性である。 ・筆者と友人はSNS上では比較的仲が良く、リプライのやりとりをす
最近話題の「メタバース」ってなに？ 言葉の意味から業界動向まで解説 昨今よく話題に上る「メタバース」。ブレイクポイント株式会社と株式会社Moguraが共催したウェビナー「Future Tech Meetup #6 最近話題の『メタバース』ってなに？ 業界動向を解説」ではメタバースという言葉の解説から関連業界の最新動向まで、セミナーとディスカッションの両形式で情報共有や議論が行われました。本記事はそのイベントレポートとなります。 テーマは「メタバース」 シリコンバレーやゲーム業界などを中心に今や世界的な話題となっているメタバースですが、今のところ言葉だけが先行しており、その実態がよくわからないという人も多いでしょう。今回のウェビナーではメタバースについて、言葉の定義から現在の状況、そして実際にメタバースを志向する企業の知見などが紹介・解説されました。 第1部「シリコンバレーから見た！『メタバ
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 独学でフロントエンドエンジニアを目指している人へ フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！ 興味ある方は是非ご覧ください。 はじめに 記事の内容はタイトル通りです！ 年明けから個人で3つほどLPやweb制作系の案件に関わりました。 主にデザインカンプからコーディングする！的な内容ですが、それらを進める中で先輩やデザイナーの方から貰ったフィードバックを重要度で区切ってまとめて見ました。 重要度は個人の主観で決めてます。 Lv3~Lv1で数字が大きいほど重要度が高いです！ 割と初歩的な部分もフィードバック多いので、公開する事への恥かしさもありますが、自分の成長記録的な意義で赤裸々に記しているので、お付き合いください。 Lv3 実案件なら必須 reset.cssいれる rese
どんな記事か？ こちらのイベント参加の記事になります。 筆者自身がもっと早く身につけておけば、コーディングが楽だったなと思うことを記事にいたします。 環境 PC: MacBook Pro (Intel Core 2016) OS: macOS Montery12.3.1 Chrome: Version 100.0.4896.127 最初の頃は恐いエラーだが、仲良くなるとこれ以上の情報はない プログラミングを始めた当初は、「うぁ、またエラーか。英語でよくわからないからそっ閉じ。。」といった反応をしていましたが、 エラーほど重要な情報はありません！ どうしてかというと、 なぜエラーになったのか、全てそこに書かれているから です。 じゃぁ、「エラーをちゃんと読もう！」で終われば簡単な話ですが、最初の頃は そもそもエラーに書かれていることが分からない というケースもあるのではないかと思います。 だ
横浜のデートで北朝鮮の工作船を見に行こうとしてはいけない - 健常者エミュレータ事例集Wiki
健常者エミュレータ事例集Wiki 集合知を構築しよう トップページページ一覧メンバー掲示板編集 横浜のデートで北朝鮮の工作船を見に行こうとしてはいけない 最終更新：ID:3L0mOHPO6Q 2022年10月08日(土) 23:14:31履歴 Tweet 5W1H+Then状況説明 Who(誰が)筆者がWhen(いつ)当時付き合い始めたばかりの女性との初デート中にWhere(どこで)横浜・赤レンガ倉庫でWhat(何を)Why(なぜ)近くに面白い施設があると思ったためHow(どのように)海上保安庁の工作船展示館に行こうと誘ったThen(どうなったか)本当に泣かれてしまうという大変申し訳ないことになった 健常行動ブレイクポイント 付き合って最初のデートのムードで行く場所ではないと認識できていなかった 友人関係で出掛けるのと異なり、男女交際においてはムードが大事であることを認識できていなかった
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
Webデザイン100トレース | Hypertext Candy
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
Webページでよく使用されるレイアウトに役立つCSS Gridの実装テクニックのまとめ
kz（livetune）が考える、VTuber文化ならではの魅力「僕らが10年かけたことを、わずか2年でやってる」
Webサイトのコーディングで困る前に知っておきたい3つのポイント
レスポンシブ対応のレイアウトを実装する最新テクニックを解説、モバイルファーストとデスクトップファーストの現状
Chromeの拡張機能を自作する - 虎の穴開発室ブログ
Webデザイン制作が変わる！便利な最新オンラインツール45個まとめ
プロと読み解く Ruby 3.1 NEWS - クックパッド開発者ブログ
Web制作フローが変わる！便利な最新オンラインツール43個まとめ【2020年版】
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
Ruby 3.1 の debug.gem を自慢したい - クックパッド開発者ブログ
これ便利！ウェブ制作がサクサク捗る新作CSSライブラリ、ツール15個まとめ
プロと読み解くRuby 3.3 NEWS - STORES Product Blog
レスポンシブデザインに見るデザインカンプと実装との溝
pixiv のデザインシステム実装『charcoal』を OSS 化します - pixiv inside
【死傷率30%で戦闘効力が喪失_言説の検証論文】 : 戦史の探求
2019年間ベスト！Web制作を変える便利オンラインツール厳選85個
結婚式をやるなら親を呼んだほうがいい - 健常者エミュレータ事例集Wiki
ServiceWorkerの落とし穴8選 - Repro Tech Blog
Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp
コーディングを助けるためにデザイナーができること① | knowledge / baigie
ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎
「昨日突然PCが壊れた」と女性から相談されたときの5W1H+Thenによる解決方法のオチが感動モノ
最近話題の「メタバース」ってなに？ 言葉の意味から業界動向まで解説
web制作の実案件で僕が受けたフィードバック箇所を重要度でレベル分けして見た - Qiita
なるべく早く身につけたいエラーとの向き合い方 - Qiita