ChatGPT新機能が“無双”だった（西田宗千佳） (1/4)
新連載を始める。テーマはAIのニュースチェックだ。基本的には2週に一度、主にASCII.jpで公開されるニュースについて、簡単な解説と流れの分析をしていきたい。紹介されていないものでも重要な話については、別途短い解説を追記していく。 というわけで1回目は、2023年7月前半のAIニュース振り返りだ。 （※記事のタイトルをタップすると記事ページが開きます） DeepL、日本法人「DeepL Japan 合同会社」を設立 日本企業との取引を迅速化（7月3日） 翻訳AIは急速に品質が上がり、日常的に筆者もお世話になっている。DeepLは利用者を増やしているが、実のところ、無料版が強いというよりも「個人事業主でも、企業でも気軽に契約できる有料版」があることがビジネスの強みだ。日本の場合、翻訳AIを使うといってもそれは「無料でGoogle翻訳を使う」ことが多く、有料版利用は企業でも多くはないという。
これはすごい！ メディアクエリなしでレスポンシブを実装するCSSトリック5選
メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。 はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。 要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc
高品質で超便利！WordPress開発が捗るテーマフレームワーク・ベスト8（2016年版）
WordPressのサイト制作で「テーマフレームワーク」って使ってますか？ 人気のテーマフレームワークを上手に使うことで、開発効率をぐっとアップできるかもしれません。 テーマを探すときやスクラッチでテーマを構築しようするとき、たいてい作業段階のどこかで「テーマフレームワーク」という言葉を目にしてきたことでしょう。テーマフレームワークの利用はますます一般的になってきています。 テーマフレームワークとはなにか ぴったりのテーマフレームワークを選ぶ前に、WordPressテーマフレームワークとはなにかを理解しておくことは大切です。テーマフレームワークとはテーマの中心または土台となるものと言えるでしょう。テーマフレームワークを使えば、コーディングの経験がほとんどあるいはまったくないユーザーでも子テーマを作成できます。 この記事では有料のプレミアム版、フリー版を含め、人気の高いWordPressテー
海外UXデザイナーが選ぶ！本当に使えるWebデザイナー向けPhotoshopプラグインはこれだ！
Webデザインの作業効率化に役立つ、Photoshopのプラグイン＋関連ツール。たくさんあるツールの中から、UXPinチームが選んだ10本を教えてもらいましょう。 そもそもPhotoshopは、Webデザインのために作られたわけではありません。しかし、特に設定を変更せずとも活用できる機能やメリットが多く備わっています。たとえば… 扱いやすく、高い信頼性 Webデザイン全体の整合性をとるためのスタイルオプションが豊富 高解像度に対応したSVGやラスター画像を簡単に編集可能 パーツの作成からレイアウトの画像化まですべてPhotoshopでできる総合環境 もちろんすばらしいツールだからといって、ユーザー1人1人が必要とする機能をすべて備えているわけではありません。これから紹介するプラグインを使えば、PhotoshopがWebデザイン用に再構成され、Webデザインで発生する問題が解決されるでしょう
「コンテンツマーケやるから」って言われても慌てない！最初にこれ読んでみて
「コンテンツマーケティングはバブル」なんて言われていましたが、海の向こうでもいまだ注目されているようです。上司に「ウチもそろそろ」なんて言われても慌てないために、最初に読んでおきたい、ちょっと長いまとめ（保存版）。 コンテンツマーケティングに熱心な人が多いようです。伝統的な企業からスピード重視の小規模なスタートアップ企業まで、あらゆる業界のマーケターが、2016年以降のコンテンツへの投資は増えると指摘しています。 しかし、いまだに多くの人にとってコンテンツマーケティングは複雑なものです。基本的な論理を理解するのは簡単ですが、ビジネスで実質的な結果が得られるように努力を重ねられるかはまったく別の話です。ビジネスのためにコンテンツマーケティングを理解したいけれど、どこから手をつけて良いか分からない人には、このコンテンツ戦略ガイドが役に立ちます。解説を始めるにあたって必要な事項を順に説明していき
全部知ってる？今後のサイト制作で押さえたいCSSの最新プロパティ9選
CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。 1.グリッドレイアウトが捗るGrid Layout Module 『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ） CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。 2.テキストの回り込みが簡単に！ CSS Shapesプロパティ 『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイ
まだ使ってないでしょ？動画や画像のサイズ調整にobject-fitとobject-positionが便利すぎ
CSSのobject-fitとobject-positionプロパティって知ってますか？ 画像だけでなく、動画のサイズ調整（特にレスポンシブ！）にも使える便利なプロパティ、今後のWeb制作の現場で活躍しそうですよ。 Webサイトのレイアウトをするとき、動画や画像は潜在的な問題を抱えています。 たとえば、CSSで画像の幅を明示的に指定したとしましょう。もしその幅がパーセントまたはビューポート単位で指定され、高さがautoに設定されていると、ブラウザーのウインドウサイズを変更しても画像のアスペクト比は保たれますよね。 ただ、これだと画像が縦長の場合にスペースを取ってしまうので、画像の高さを制限したいときもあります。ところが、単に高さをCSSで制限すると、今度はアスペクト比が崩れてしまうのです。 こうした、画像とアスペクト比に関連する多くの問題は、CSSのobject-fitとobject-po
超簡単！人物のポーズを40秒で変えるPhotoshop便利機能
初校の直しも終わったし、あとはクライアントの最終チェックを待つのみ。そろそろ入稿の準備でも……と思ったら、「う〜ん、この写真、もうちょっとダイナミックな感じ、躍動感がほしいんだよねぇ」って、スタジオでも初校でもこれでOKって言ったじゃないですか!! 「フォトショでさ、チャチャってできるでしょ」って、空頼みですか。 でも、実はできちゃうんです！ Photoshop CS5から搭載された新機能「パペットワープ」で、人物のポーズも自在に変更できます。 以下はそのムービー。 変化が分かりやすいように、最初に元画像を薄く下に敷いています。右下は、作業中のマウス、キーボード操作画面、右上は経過時間です。40秒といっても、待ち時間が結構あります
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
Chromeで使えるエクステンション厳選25本！ (1/6)
sponsored 2024年4月に新キャンパスへ移転した静岡デザイン専門学校は、最新設備を備えた実習室とMSIのノートPCで学生の実践力を養成 sponsored 部屋が狭い日本家屋仕様になったピラーレスケース、自作初心者にもオススメ！ ピラーレスだがコンパクト、価格もお手頃なCORSAIRのPCケース「3500X」が完成度高い！ sponsored コスト、人材、セキュリティ…… データ活用の課題を包括的に解消するHPEの取り組み なぜHPEがソフトウェアを？ 統合データ基盤「HPE Ezmeral」に注力する理由を率直に聞いた sponsored “データをためる”と“データを活用する”の2製品が解決する課題、得られるメリットを知る 「HPE Ezmeral」がシンプルに実現する大規模データ活用の姿とは sponsored スマホ設定で快適なハイエンドゲーミングルーター「ROG Ra
ASCII.jp：これぞ完璧企画書――「1枚企画書」パターン実例3題 ｜パワポで極める「ビジネス極意」
本連載では、竹島愼一郎氏が提唱するインパクト抜群の「1枚企画書」をPowerPointで作る手順を全5回で紹介します。社会人になったらWordやExcelだけでなくPowerPointも使いこなせなくては、社内や取引先でのプレゼンに勝ち抜けません。しかし、ただ単に企画書をPowerPointで再現しただけでは、印象に残るプレゼンにはほど遠く、居眠りを誘う会議になってしまうことでしょう。 「1枚企画書」の最終回として、本書が出版に至った企画書の実例を含む、「プレゼン力の高い企画書」を3種類ご紹介します。実際の成功事例を踏まえてPowerPointをフル活用すれば、皆さんの仕事もきっと成功に近づくはずです。 ※本記事は「ビジネス極意シリーズ パワポで極める1枚企画書」から一部抜粋し、編集・再構成したものです。 Table of Contents プレ企画書1――飽和市場の「新商品企画書」 ■
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
jQueryで作る“Amazon風”インターフェイス (1/5)
「最近、どこでよく買い物していますか？」――こう聞かれて「Amazon！」と答える方も少なくないかもしれません（特に本誌読者であれば）。当初は書店の店頭で入手が難しい書籍の購入などに重宝していたAmazonですが、取扱商品が増えた今では、ペットボトルの水からパソコンまで何でも買える便利なECサイトとして、ネット利用者の生活に定着しました。 もっとも、Webサイトを作る立場から見ると、Amazonの魅力は品揃えやサービスだけではありません。Webサイトのデザイン面からAmazonを見ても優れた点は多数あり、実際、国内外の非常に多くのECサイトがAmazonをお手本にしたUIを採用しています。今回は、「Amazon.co.jp」を参考にさせてもらいましょう。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。現
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
