HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
エンジニアにUIが分かりにくいと言われた - 並び替えボタン編｜ANDPAD Design Team｜note
ANDPADでデザインを担当している後藤です。 エンジニア 「このボタン、分かりにくいですね」 開発を進めてて、エンジニアにこう言われたことはありませんか？ 「このボタンって、どう動くんですか？」 「このボタン、気がつきにくいですね。」 そういったときに、どのようにUIの意思決定をしたか、説明して納得してもらう必要があります。 今回は「並び替えボタン」で起きたケースを紹介します。 あまり目立たない機能ですが、データを整理することが多いBtoB向けサービスでは、要望が多い機能じゃないでしょうか。 【目次】 ・どこが分かりにくかったか？ ・エンジニアとデザイナーの通る思考回路は違う ・エンジニアの考えた解決策 ・画面上における機能の優先順位 ・機能単体のゴール ・まとめ どこが分かりにくかったか？実際の画面がこちらです。（※こちらは現在開発中の機能になります） さて、どこが分かりにくかったでし
PWAが来るって言っているエンジニアは今すぐ辞めろ
PWAとかいうhtml5のリブランドが技術者界隈で騒いでるが、こんなの受け入れられないだろ。 PWAの実物見た？触った？？ instagramのPWAが最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、 オワコンであった。 ネイティブと見分けつかないんだったら本当にエンジニア辞めたほうがいいよ。 まず、タイムライン上で複数投稿があった時にスワイプで切り替えられない。 なんと左右をタップするのである。 HTMLを操作してる感満載のガクガクの感じ。 ユーザーってこういう些細なガクガクに敏感だよね。マーケット感ある人ならわかるよね。 そんでもってストーリーズ。 もう最低。 動画が自動再生しないの。止まるは止まるは。もう何なの？？？って感じ。 こんなの受け入れられないでしょ。 カメラは直接起動できないし、フィルターも少な
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
年々進化しているボタンをデザインするポイントを解説、デザイナーの追求に終わりの文字はない
Webデザインにおいて、ボタンの存在は欠かせません。検索する時、サイトにログインする時、ソーシャルでシェアする時、ショッピングカートに入れる時、たくさんのボタンが使用されています。 これらボタンのデザインはWeb業界と共に進化し続け、気がついたら数年前のデザインだったということもあるでしょう。 年々進化しているボタンがどのように変わってきたか、Dribbbleをベースにしてデザインするポイントを紹介します。 Button Design Over the Years 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2009年のボタンのデザイン 2010年のボタンのデザイン 2011年のボタンのデザイン 2012年のボタンのデザイン 2013年のボタンのデザイン 2014年のボタンのデザイン 2015年のボタンのデザイン 2016年
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
ブラウザ上で超簡単にWebサイトが作れる！Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、マウス操作で簡単に「Bootstrap4」に対応したWeb制作をブラウザ上で行えるサービス「Pingendo」をご紹介しようと思います。 以前から、PC向けソフトウェアとしてリリースされていましたが、最近になってベータ版ではあるものの「Chromeブラウザ」からでも利用できるようになりました！ 【 Pingendo 】 「Pingendo」は、基本的にマウスでポチポチとクリックしていくだけで、簡単に見栄えの良いWebサイトが作れてしまう便利なサービスです。 また、中・上級者向けにソースコードもすべて編集可能になっているので、自分好みにカスタマイズすることも出来るのが特徴となっています！ ■基本的な使い方！ それでは、実際に「Pingendo」を使いながら、どのようなサービスなのかを見ていきましょう。 利用するにあたり、面倒な登録やインス
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
Photoshopの効率化になるショートカットキー一覧とカスタム方法【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお
Photoshopのシェイプでできること。
PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か
2014年にはWebアプリの「オフラインファースト」が流行するのではないか？
先週2月18日に都内で開催された「第36回HTML5とか勉強会」。テーマは「2013年、Web開発の進化を探る」でした。 そこで「2014年頃にはネットに接続しなくても使えるオフラインWebアプリケーションが流行するのではないか」と話したのが、html5j.orgの世話人でもある白石俊平氏。白石氏が解説する「オフラインファースト」は、これからのWebアプリケーションのひとつの方向性が示されていると思われます。 その講演の内容をダイジェストで紹介します。 オフラインファーストの思想と実践 html5j.org世話人の白石俊平氏。 オフラインファーストとは、オフラインを最初に考えてWebサイトを、Webアプリケーションを作ろうという思想のことです。 で、オフラインファーストって、モバイルファーストという言葉に似ています。モバイルファーストというのは2010年に登場した言葉で、これは去年、とにか
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
フォームを改めて考えなおしてみるエントリーフォーム最適化のまとめ（EFO） | バシャログ。
世間が彼を見捨てても、私はキムタクの月9を見続けます。 どうもこんばんは Latin です。 今回はエントリーフォームの最適化についてです。 フォームって、ウェブサイトをローンチした後は、メンテナンスが全然されていない･･･って事は結構多いのではないしょうか？ 仕様が思いの外複雑であったり、分析・改善に費やす時間がなかったりと、理由は様々だと思うのですが、今回は最低限把握しておくべき項目をまとめてみました。 フォームの初期実装時やリニューアルなどに少しでもご参考になればと思います。 【入力サポート】 選択項目は、デフォルト値に配慮する 例えばですが、都道府県のプルダウン選択なら、メインターゲット層の多い都道府県にするというヤツです。「東京都」をデフォルトにしているところを良く見かけますよね。 必須アイコン「必須」の表記で目立つ色で配置する 「※」や「*」は不親切だし、伝わりづらいようです。
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
【2012超まとめ】確実にWEBサービスを作りたい人へ【前編】
（記事が長すぎたので前編・中編・後編に分けました） 僕ももう、リストラされそうなとあるおっさんなんですが、先日Webサービスを公開しました。 きっかけになったのはこの記事です。 自分でWEBサービスを作りたいと思っている人へ http://anond.hatelabo.jp/20101203150748 こんな事できたら良いなぁと思っていると、他にもやっている方たちがいました。 たった2日で製作されたWebサービス「お部屋晒し」って？ http://matome.naver.jp/odai/2131952812556433001 WEBサイトを発注してみた。 http://anond.hatelabo.jp/20120318122617 Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300 http://d.hatena.ne.jp/inouet
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ