このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。
初めてサイトに訪れてくれた人にどのような機能やコンテンツがあるのか紹介をしたり、ちょっとわかりづらいサービスなどでユーザーが戸惑わないよう手助けしたりするのに便利なサイトツアー機能を実装できるスクリプトのまとめです。 大体同じような動きではあるものの単純にヒントを出していくだけのシンプルなものから、オプション・コールバックが豊富に用意されていていろいろ好みにいじれるものまで様々です。 ただし、単体で動くものもありますが、jQueryプラグインや中にはBootstrapと組み合わせて使用する感じのものもあるのでその点は注意してください。 Intro.js 注目させる箇所以外はオーバーレイがかかるようになっているタイプのもので、data属性で表示内容や順番を指定していくスクリプトです。 豊富に用意されているサンプルにあるように、現在の表示をプログレスバーで表示させたり、ツアー終了後に現在見てい
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい!新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト! SVGスプライトとは? SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」に目
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編(CanvasとWebGLの比較)と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト)は従
先日Photoshop CC 2015がリリースされ、画像の書き出し関連がまた変更になりましたね。 Webデザイナー&コーダーの皆さんは、普段画像の書き出しにどの機能を使っているでしょうか? CS6・CC・CC2014・CC2015の各バージョンで少しずつ搭載されている機能に違いはありますが、現在PhotoshopからWeb用画像素材を書き出す方法としては下記の4つの方法が考えられるかと思います。 スライス→Web用に保存(CS6〜) Generator機能→画像アセットの生成(CC〜) アセットの抽出(CC 2014) 「新」書き出し機能(CC 2015) 私は長らく1の「スライス→Web用に保存」を愛用してきましたが、昨年あたりからもっぱら2の「Generator機能による画像アセットの生成」を使うようになりました。 ▼「画像アセット」 まず「Web用に保存」と比較した場合の「画像アセ
まえおき Photoshopには、全てのレイヤーを個々のファイルに書き出すための 「レイヤーをファイルに書き出し(Export Layers to Files)」というスクリプトが標準で入っているのですが、 これがめちゃくちゃ遅いため、書きなおして速くしてみました。 レイヤー25枚のpsdで使うと55秒かかっていたのが、 このスクリプトに置き換えると、3秒で終わります。 準備 以下のURLから、ExportLayersToFile.jsxをダウンロード https://raw.githubusercontent.com/kyubuns/yogurt/master/ExportLayersToFile.jsx ダウンロードしたファイルを'/Applications/Adobe Photoshop CC 2016/Presets/Scripts/'以下にいれる (Windowsは、C:\Pro
僕に言わせれば、このモデルはとっくに破たんしているし、SEOにおける機会のありかたや、今の時代に通用する戦術の現状を反映していない。 ビジネスやマーケティングに沿って見直すのが、本当の「SEO監査」僕は、ここで行うべきことは「SEO監査」、つまりSEOに焦点を当てた監査だと考えてみたい。 ここでいう「SEO監査」とは、 どのようなトラフィックを獲得できるか?何が足りないのか?何がうまくいかなくて、何が間違っているのか?を問いかける作業であり、マーケティングプロセスやビジネスプロセスの下流に当たる、きわめて戦術的なレベルに位置するものだ。 真に成すべきは、より段階的に進めることを志向しながら、情報を集め、現時点でのビジネスニーズに基づいて戦術や作業を進化させることだ。 したがってまず、次のように問いかけよう。 会社やマーケティングの最も重要な全体目標は何か? 社内の全員が、今年、今四半期、今
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー(私)によるDTPデザイン注意書き:Webと
おはようございます。お久しぶりです。GWもあっという間に終わり…いつもの忙しい日常が帰ってきましたね…。これから梅雨という少し憂鬱な季節がやって参りますが、適度にゆるーく乗り切りましょう! 今日は行間についての記事です。Webでは、行間のとり方ひとつで読みやすさが全く変わります。ですので、文章を配置する際は、それぞれのフォントサイズに適正な行間を与えてあげることが重要となってきます。 一般的な行間のとり方 一般的には、文字が小さいほど行間を広くとるのが読みやすく、逆に大きな文字は行間が狭くても読みやすいと言われています。それには、下記のような理由が挙げられます。 小さい文字の時に行間が狭いと、一度に複数の行が視界に入ってきてしまうため、とても読みづらくなります。 大きい文字の場合は、文字そのものが大きいので視界に入る行は比較的少なくなります。 そのため、多少行間が狭くても読みやすさに問題は
StanはオムニチャネルコマースにおけるSaaSソリューションプロバイダー、Agiliron Inc.のCCOです。彼は30年以上のキャリアがあり、BtoC、BtoBのソフトウェアのローンチなどにも関わってきました。 大繁盛なECサイトがある一方で、ぜんぜん儲からないECサイトも存在します。そのようなECサイトはなぜ儲けを得られないのでしょうか。その原因は多々あります。例えば、商品そのものの品質が悪いということや、登録にとてつもなく時間がかかるということ。その他にもウェブサイトからの反応がなかったり、サイトの所有者や運営団体が不明で、実体そのものが疑わしかったり… このように、ECサイトが期待したほどの成果が得られない理由は様々ありますが、最大の要因はなんでしょう? それは、「良いユーザー体験の欠如」です。 商品やサービスを販売しているサイトの目的は、クライアントを惹きつけ売り上げを増やす
対象読者 Webサイト開発者および運営者 はじめに AMPとは? AMP(Accelerated Mobile Pages)は、モバイルページ高速化によるユーザー体験の向上を目的として、2015年にGoogleが発表したプロジェクトです。 Twitter、Pinterest、WordPress.com、LinkedInや、BBC、産経デジタルなどのパブリッシャーがAMPのパートナーに参加。2016年2月から、Google検索結果での表示が開始されました。 具体的には下記で解説するような「AMP HTML」などが新たに策定されています。 基本構成 AMPは「AMP HTML」「AMP JS」「Google AMP Cache」で構成されています。 AMP HTML:既存のHTML/CSS/JavaScriptの一部を制限することで、高いパフォーマンスを実現します。 AMP JS:高速レンダリ
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴から情報設計の原則、それぞれ何のための部品なのか、という解説がされています。なぜこうなったのか、なぜこれが良くてあれが駄目なのか、Apple の UI デザイナーは何を考えてこのような設計にしたのか、HIG ではそのようなところまでは説明されていないことがあります。いくら内容を丸暗記したとしても「 なぜ 」がわからなければ本質から理解したとは言えません。 よくある UI デザインにおける誤り、『磨りガラス効果がかっこいい』『アニメーションしておくとかっこいい』『ボタンは右配置の方が押しやすい』『色が綺麗』『流行っているから優れている』…などがありますが、そういうことではない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く