FILCO、左右分離可能なエルゴノミクスキーボード「Majestouch Xacro M10SP」
【catnose】Zennを生んだ個人開発者に聞く、プロダクト開発の美学
個人開発者 catnose ソフトウェア開発者・デザイナー。 個人開発者として、Webデザイナー向けメディア「サルワカ」、ポートフォリオ作成サービス「RESUME」、技術情報共有サービス「Zenn」、簡単にAIサービスがつくれる「だれでもAIメーカー」など、数々のプロダクトを世に送り出す。家族は妻、娘、犬、猫。 個人開発者として、ポートフォリオ作成サービス「RESUME（レジュメ）」や技術情報共有サービス「Zenn（ゼン）」、入力欄や選択ボックスを組み合わせるだけで簡単にAIサービスがつくれる「だれでもAIメーカー」など、数々のプロダクトをヒットさせてきたcatnose（キャットノーズ）さん。現在も複数の開発案件に関わりながら、新たなプロダクトを開発中だといいます。 今回はそんなcatnoseさんのこれまでの作品を振り返りながら、個人開発者として培った開発哲学や、30代になるとともに起きた
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか
ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、 フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。 下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインのディテールは脇に置いておく 配下ページのレイアウトを実装する時に考えること ディテールを掘り
コーディングではなくデザインがメインの無料オンライン学習サービス
2020年5月26日 Webデザイン, インスピレーション Webデザインを学ぼうと思っても、オンラインで学べるのはHTMLやCSSのコーディングであることが多く、デザイン自体を学べるサービスは結構少ないです。そこで今回は無料でデザインを学んだり、作品制作の手助けをしてくれるサービスを紹介します。 ↑私が10年以上利用している会計ソフト！ chot.design chot.designは無料で学べるデザインの学習サイト。レッスンは5〜10分程度で読めるので、スキマ時間を使って勉強できます。名刺制作やバナー制作など、初心者が取り組みやすいものが多い印象。レッスン自体は無料ですが、会員登録すると進捗確認ができたり、Q&Aフォーラムで質問できるようになります。まずはここからはじめてみるといいですね！ カリキュラム内容一例 バナー制作テクニック アイコン制作テクニック 名刺制作テクニック UI/U
Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
デザイナーの父親が子供の手書き文字でフォントを作った理由と顛末
後ろ姿で失礼します、タムカイです。 あ、すみません、今ちょっと仕事中でして… え？お仕事ですか？ ああ、はい、デザイナーってのをやらせていただいております。 え？デザイナーの仕事といえば今話題のあの…？ いやいやいや、違います違いますよ…！！ まあ、あの問題については個人的にkmんが塩津gはr；いskん（ry と、ここ最近よく聞く業界のゴタゴタした感じはさておき、わたくし仕事やら何やらの都合で帰宅するのが遅くなってしまうことがよくあります。 そうすると、日中はあんなに騒ぎまくりまとわりつきまくりの子供たちもすっかり寝てしまっていることがほとんど。 子供を起こさないようにそーっと玄関の扉を開けて、ゆっくりリビングへ向かう動作にも随分慣れてまいりました。 一方、パパ産業も七年目に入ってくると子供たちとのコミュニケーションの幅はとどまることなく広がっていきます。 しゃべり言葉で語彙が増えていくの
移住もアリかも。沖縄県でイケてる仕事をしてるWeb制作会社まとめ11選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ハイサイ！ Pooleチームの鮫島です。 最近、沖縄県のとある制作会社さんとやりとりをする機会があり、沖縄特有の考え方や仕事方法などにとても刺激を受けました。 IT/Web系の制作会社って東京に集中しているイメージがあるのですが、そもそもWebってネット回線があればどこでもできる業種だし、きっと各都道府県に素敵な制作会社がいっぱいあるんだろうなーと思い、調べてみたのでご紹介します。 とはいえ、全都道府県を紹介すると、とんでもない量になるので、まずは「沖縄県」からご紹介させていただきますです。 沖縄のイケてるWeb制作会社11選 株式会社RAZONA沖縄事業所 東京に本社があり、ベトナム・スペインにも拠点をもつデジタルソリューションを提供する株式会社RAZONAさんの沖縄事業所です。ハウス食品グループのコーポレートサイトを運用したり、アウトドアブランド「Coleman」のオフィシャルサイトを
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
webnonotes.com - webnonotes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
レスポンシブWebデザインの基礎
組み合わせ利用でいいとこ取り！ Adobe XD＋Photoshop＋Illustratorの長所を活かしたデザイン手法を学ぼうAkiko Kurono
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
デザインに便利なツール18選｜かずたか
2017年にリリースされた日本語のフリーフォント、英語のフリーフォント総まとめ
“ハト”ヒールでハトと仲良くなりたい
harold-spm.com - harold spm リソースおよび情報
http://graystar0907.wix.com/bukiicons