Anthropicが提供するAIサービス「Claude.ai」の新機能「Artifacts」が、8月28日から全ユーザーに開放された。iOS版およびAndroid版のClaudeアプリでも利用可能だ。 Artifactsは、Claudeをアシスタントとしてコンテンツを作ることに特化した機能。ユーザーはArtifactsを通じて、Claudeとともに作成したプログラムなどを専用のウィンドウで確認し、発展させられる（関連記事：チャットAI「Claude」すごい新機能「Artifacts」の使い方、全部教えます）。 Artifacts機能は2024年6月にプレビュー版として導入後、数千万件のArtifactsが作成されるなど、多くのユーザーに活用されてきたという。機能を利用することで、コードスニペット、フローチャート、SVGグラフィックス、ウェブサイト、インタラクティブなダッシュボードなど、さま

今から5年以上前の2016年に登場以来、着実に進化を続けてきたアップルによるSwiftプログラミング環境アプリ「Swift Playgrounds」のメジャーバージョン4が登場した。 今回のバージョンの最大の特長は、iPad上で作成したアプリを「App Storeを通じて全世界に向けて公開するまでの機能」を内蔵したことだ。SwiftUIなど、iOSやiPadOSのアプリを作成するための本物のフレームワークをそのまま利用でき、本物のアプリを作成できる。言うまでもなくアップルの純正アプリで、誰でも無料で利用できる。さっそく使ってみよう。 iMovie、GarageBandに続くアマチュア用高機能アプリ 当初は教育用の色彩の強かったSwift Playgroundsは、iPadだけでプログラミングの学習からアプリの開発、公開まで完結する、ハンディな「アプリ開発環境」となった。アップルの純正アプリ

「（2013年9月にGoogleから発表された）ハミングバードの導入で SEO の方法をどう変えたらいいのですか？」という問いに対して、私はいつも「（ごちゃごちゃ細かいこと気にせず）普通に文章を書けばいいんですよ」という回答をしています。少なくとも一般的な事業会社のSEO担当者であれば、細かな仕様変更に振り回されずに、本質的に重要なことにもっと注力せよという意味合いも込めてそう回答しているのですが、よくよく話を聞いてみると""「普通に文章を書く」とは何かをそもそも理解していないから結局何をすればいいのかわからない"" という現実に直面している方が少なからずいらっしゃるということで、少し説明を加えたいと思います。以下、初心者（SEO経験年数1年未満）を想定しています。 ハミングバードのおさらい - クエリ修正戦略 最初にハミングバード（Hummingbird）の内容について改めておさらいをし

サイト内コンテンツのコンバージョン貢献度を調べる場合は、「ページ」単位で分析するのが一般的です。Web解析のツールにも充実したページ分析機能が備わっていて、特別な設定や実装をしなくても利用できます。 ただし、同一ページ内に掲載された小さなコンテンツエリアやUIパーツの効果を分析したい場合は、「ページ」単位では荒すぎます。また、コンテンツエリアは読むだけでクリックのようなアクションが発生しないことも多く、計測して分析するには工夫が必要です。 そこで今回は、ページ内のどのコンテンツエリアが閲読されたかを調べ、その貢献度を分析する方法について紹介します。 エリアの閲読を計測する方法 エリアの閲読分析は、クリックのような分かりやすいアクションが発生しないので、アイトラッキングのようなリサーチを実施するしかないと思われがちですが、工夫すればWeb解析ツールでも定量評価できます。マウスの移動やスクロー

依頼は、Draw me!のサイトから写真をアップして、メールアドレスや要望を入力するだけ。PC、スマートフォンから依頼できます。 1週間以内に納品されるということなので、のんびり待つことにしたのですが、わずか5時間後には「[Draw Me!]似顔絵が完成しました！」という件名のメールが届きました。 届いた似顔絵がこちら。画像サイズは300×300pxで、「ポップな似顔絵をお願いします」と要望に書いたこともあり、星を散りばめたカラフルな仕上がり。納品のスピードや似顔絵の質にも満足です。 さらに4日後、メールをチェックしてみると、似顔絵が続々と届いていました。依頼した写真を削除しないと、イラストレーターさんに依頼がされ続けるようです。アップした写真を慌てて削除しました。 完成した似顔絵は、メールに書かれているURLからダウンロードでき、レビューを書くことでDraw me!内のギャラリーに公開さ

スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、菊池 崇氏が解説します。

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）

jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201

「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、

スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。