『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA
株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円（本体2,6
アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するためのUI要素です。自分が今どのページを訪れているのかを示すことによって、ユーザーはウェブサイトの構造や階層を理解しやすくなります。 ▼ 実装例（一部抜粋） <li><a href="#">CSS</a></li> <li><a href="#" aria-current="page">JavaScript</a></li> <li><a href="#">その他</a></li> ▼ スクリーンリーダー（VoiceOver） aria-current="page"を指定した要素は「現在のページ、リンク、JavaScript」と読み上げられます。また、リンクが一度でもクリックされていたら、「閲覧済み」という音声が追加されます。 ▼ スクリーンリーダー（ナレーター） 「リンク、JavaScript」と読
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
フロントエンドエンジニアにとっての2019年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第5回目となる本記事ではウェブ業界の「フロントエンドエンジニアにとっての2019年」と題してアンケート結果を紹介します。 JSでブラウザ挙動をどうやって防ぐ？ ウェブページでインタラクションを作るときに、ブラウザのデフォルト挙動が邪魔になることがあります。たとえば、aタグのリンクはJavaScriptでキャンセルでき、自前の処理に置き換えることができます。 ブラウザ挙動のキャンセルのやり方にはさまざまな手段があるのですが、主流のやり方はどれでしょうか？ addEventListener()メソッドやonclick属性のイベントについて質問しました。 187票の回答があり「ret
デザイン制作の効率化に役立つ! AdobeXDのコンポーネント入門 - ICS MEDIA
2019年5月のアップデートでシンボルが廃止され、代わりに「コンポーネント」が実装されました。従来のシンボルに比べ柔軟なパーツのバリエーション作成が可能で、またドキュメント間での同期が行えるため複数人での作業やアセットの再利用がより効率的にできるようになりました。 従来のシンボルの機能と課題 シンボルは、ドキュメント内に同じ要素を繰り返し配置する場合に使用します。要素をシンボル化して配置することで、後からまとめて変更できるのが特徴です。シンボル内の要素の位置や大きさなどを変更すると、シンボルのコピーすべてに反映されます。 またテキストとビットマップは個別に設定可能で、たとえばボタンのテキストだけを変更するといったことができます。しかし、マウスオーバーや非アクティブ時のデザインで色や線を変更したい場合は変更が同期されてしまうため、別のシンボルとする必要がありました。 コンポーネントではこうい
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
Adobe XDとPhotoshopのアセット連携が便利! 快適なデザイン制作フローを実現しよう - ICS MEDIA
Adobe XDがデザインやプロトタイプのツールとして広まっていますが、Photoshopなど他のデザインツールとの使い分けや連携に悩んでいるウェブデザイナーの方も多いのではないでしょうか？ この記事では、デザインフェーズにおいてXDとPhotoshopを併用してデザインする方法を紹介します。 Photoshop単体で最後までデザインすることもできますが、XDと連携することによって以下のような恩恵を受けられるようになります。 XDの機能「リピートグリッド」で作業効率をアップ プロトタイプで実際の動作をシミュレーション URL共有でフィードバックや修正のサイクルコストを短縮 XDの強みである動作の軽快さを利用して全体の画面を見通す PhotoshopとXDを行き来してデザインする場合 Photoshopでパーツをデザインし、XDでレイアウトする方法を紹介します。 Creative Cloud
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ 「アニメ画像に変換する君」をリリース GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。 ▲ デスクトップアプリケーション「アニメ画像に変換する君」 主な用途としてLINEアニメーションスタンプの制作に利用できます。LINEアニメーションスタンプはAPNG形式が採用されており、Adobe AnimateやPhotoshop等のソフトで制作したアニメーションをAPNG形式に変換する必要があります。 このアプリケーションを使えば、簡単な手順でLINEアニメーションスタンプ用のAPNG形式に変換できます。 ▲「アニメ画像
【速報】人工知能Adobe Senseiを組み込んだ未来のPhotoshopとXDが凄すぎる - ICS MEDIA
世界最大のクリエイティブカンファレンスAdobe MAX 2017が米ラスベガスで開催されています。10月18日の基調講演では、アドビの人工知能「Adobe Sensei」を活用した、未来のクリエイティブツールのデモが実演されました。 本記事では、速報として現地で取材しているスタッフ（池田）がレポートします。 Photoshopに組み込んだAdobe Sensei Photoshopに組み込んだAdobe Sensei。「クリエイティブアシスタント」という位置付けです。Siriのようにサイドパネルでいろいろアドバイスするそうです。 映画のポスターの手描きのスケッチをPhotoshopに挿入します。すると、サイドバーに解析した結果が表示されます。このスケッチから「女性」「星」「宇宙」が含まれていることをAdobe Senseiが分析しています。 キーワードを元に検索するよう伝えると、適した画
Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果（業務時間やコードの書き方、Web技術について） - ICS MEDIA
Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果 （業務時間やコードの書き方、Web技術について） ウェブ制作者の就業時間やコーディングスタイルなど、皆さんは気になったことはありませんか？ 同業者と交流の少ない職場だと、常識だと思っていることが業界多数の傾向と異なっているかもしれません。 そこで、Twitterアカウントから実施していたWeb業界に関するアンケートをまとめました。この記事では「Web業界の働く時間」「トレンドの技術」「コーディングスタイル」「フォント」の4つのアンケート結果を紹介します。 Web業界は何時まで働くのか？ 当サイトICS MEDIAのアクセスは18時を超えると急激に下がります。このことから、Web業界で働く大半の方々は18時に仕事を上がっているのではないかと考えるようになりました。このことをツイートしたら意外性があったらしく多くの注目を集めま
［速報］Adobe XDの大規模機能追加を発表！スタイルガイドの共有やコラボ編集をはじめ、待望のレイヤー・シンボル機能を搭載 - ICS MEDIA
［速報］Adobe XDの大規模機能追加を発表！スタイルガイドの共有やコラボ編集をはじめ、待望のレイヤー・シンボル機能を搭載 Adobe Systemsアドビ システムズが世界最大のクリエイティブカンファレンスAdobe MAX 2016（米サンディエゴ）で、Experience Design CC（Adobe XD）の大規模な機能追加を発表しました。本記事では、速報としてAdobe XDの新機能を現地スタッフがレポートしつつ、クリエイターの視点から魅力や使い所を紹介します。 ▲Adobe MAX 2016の基調講演 XDはAdobe製のUXデザインツール XdはAdobe製のUXデザインツール。モバイルアプリやウェブサイトのプロトタイプを簡単な操作で制作できるデスクトップのソフトウェアです。昨年のAdobe MAX 2015で「Project Comet」という名前で発表され（参照「Ad
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
Web・アプリデザイナー必見！ Adobe Photoshop CCの「デザインスペース」を使った新しいワークフロー - ICS MEDIA
▲ 設定できる項目数の比較 「設定できる項目が少なくてデザインができないのではないか」と思われるかもしれませんが、その点は心配ありません。デザインスペースから標準のワークスペースへは、[ウィンドウ]→[標準のPhotoshopに戻る]により切り替えることができます。Web・アプリケーションのデザインはデザインスペースを使って素早くデザインし、どうしても標準のデザイン機能でないと実現できないデザインがあれば標準版へ切り替えながらデザインする、というワークフローとなります。 デザインスペースは未来のワークフロー 筆者は何度かこのデザインスペースを使用してデザイン作業をしていますが、標準版より目的の機能に素早くアクセスできるようになって非常に便利です。また、Adobeのグラフィック作成ソフト「Adobe Fireworks CS6」に近いようにも見えますが、必要な場合はすぐにPhotoshopの
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Flash Pro CCがAnimate CCに名称変更！ Flashが終わったと勘違いをする前に知っておきたい8つのこと - ICS MEDIA
Flash Pro CCがAnimate CCに名称変更！ Flashが終わったと勘違いをする前に知っておきたい8つのこと アドビ システムズ株式会社（以下、アドビ）は2015年12月1日、「Adobe Flash Professional」の名称を、2016年初頭より「Adobe Animate CC」に変更すると発表しました。(参照記事「Adobe Flash Professional を Adobe Animate CC に名称変更 | Adobe Creative Station」) このニュースを皆さんはどのように捉えましたか？ 「ついにFlashが終わった」「Flash、いままでありがとう」と思った方はまったくの見当違い。今回のニュースで勘違いしがちなポイントをまとめました。 制作ツールの名称だけが「Flash Professional CC」から「Animate CC」に変更
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
