MT Translator｜3rdFocus Movable Typeの便利なプラグイン、テーマ、解説書MT Translator 今あるMovable Typeサイトを使って、 短期間、低コストで多言語サイトへ MT Translator を使うことで今のMovable Typeをベースに 多言語サイトを実現することができます
直帰率に効果あり！ferretで実践したファーストビュー改善事例
ferretのトップページでは、ユーザーのみなさまに「次に読みたい記事」をスムーズに見つけてもらう必要があります。それは、メディアサイトのトップページではどこも同じでしょう。 今回のA/Bテストでは、トップページの直帰率改善のため、記事への回遊を増やすことを目的にファーストビューを改善しました。 トップページのファーストビューでA/Bテストを実施 2017/06/19(月)～2017/07/07(金)の18日間、ferretのトップページを訪問したすべてのユーザーを対象にテストを実施しました。 テストクリエイティブ もともとferretのトップ画面には、上の画像のように、カルーセルが表示されていました。 しかし、ferretのユーザーが使っている主要な画面サイズのパソコンでは、ファーストビューがカルーセルで埋め尽くされてしまい、最新のニュース記事をすぐに読むことができません。 そこで、カル
エンジニアやデザイナーにおすすめのChrome拡張機能5選
GoogleのChromeストアでは、便利な機能を持つ拡張機能が数多く提供されています。 業務内容にあわせて自分に最適なツールをインストールすれば作業効率アップが期待できますが、拡張機能の数が多すぎてどれをインストールしたらよいのか迷ってしまうことはないでしょうか。 今回は、エンジニアやデザイナーをはじめとしたWeb開発業務の方におすすめのChrome拡張機能5選を紹介します。便利なものは取り入れて、作業を効率化して行きましょう。 エンジニアやデザイナーにおすすめなChrome拡張機能5選 1.DevTools Theme: Zero Dark Matrix Chromeウェブストア 「DevTools Theme: Zero Dark Matrix」は、Google Chromeデベロッパーツールの視認性を高めてくれる拡張機能です。 Google Chromeのデベロッパーツールは、デフ
デザインしたサイトをそのままローンチ!国産Webデザインプラットフォーム「STUDIO」
2018年4月上旬、待望の国産プロトタイピングツールが公式に公開されました。その名もSTUDIOです。 STUDIOはiPhoneアプリのモックアップを作成するだけでなく、Webデザインのモックアップを作成し、そのまま公開までできてしまいます。 そこで今回は、*デザインしたサイトがそのままローンチできる新しい国産Webデザインプラットフォーム「STUDIO」*の概要や簡単な使い方を紹介します。小型サイトならたった数時間でWebサイトの公開まで行き着けるでしょう。使い方は簡単なので、早速触ってみてはいかがでしょうか。 参考： STUDIO 「STUDIO」とは？ STUDIOは、デザインから公開、運用までを丸々行うことができる、無料から始められるWebデザインプラットフォームです。もともとはモバイルデザインも含めたプロトタイピングツールとして注目を集めていましたが、ドラッグ＆ドロップで簡単に
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
WebからIoTまで！Milkcocoaを使って超簡単にリアルタイム通信を実装してみよう | creive【クリーブ】
こんにちは。Webエンジニアの田島です。 みなさんは今までサービスやコンテンツを作っていて、以下の様なことを思ったことはないでしょうか。 Web上でユーザ同士がチャットできる機能を実装したい Google Driveのように、複数人で同時にファイルを編集できる機能を提供したい パソコンとスマートフォンを連動させて、スマートフォンからパソコンを操作できるようにしたい Raspberry Piで取得した値を即時にWeb上で見られるようにしたい これらを実現するために共通する必要な要素が「リアルタイム通信」です。 今までリアルタイム通信を実装するには、サーバーを用意し、Node.jsやWebSocketといった技術を使ってリアルタイム通信特有のプログラムを記述する必要があったのですが、今回紹介するMilkcocoaというサービスを使えば、それらがなんとサーバーを用意することなく、フロントエンド側
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方 | バニデザノート
レスポンシブ・イメージ。 ざっくり言うと、「retinaなど高解像度なディスプレイも増えてきたし そろそろPCビューでも@2xと@1xと両方の画像を処理しましょうかね。」 ・・という処理と、 レスポンシブレイアウトの際にさらに 「どうやって高解像度画像とノーマル画像を扱っていくの？」 っていう課題みたいなところのことかなと思っています。 そんなレスポンシブ・イメージ的なコーディングのしかたと ついでのWordPressで「今」どうやって扱うといいかなぁという考察です。 「retina.js」は、「/images」 などのフォルダに「a.jpg」 と 「a@2x.jpg」 を放り込めば自動でretinaな場合にのみ@2xに変えてくれる便利なjsです。 →わたしが使ったタイミングがだいぶ前なので、今はよくわからないのですが なんとなく重い、あと、なんか変換されてるのか不安になるので、設定が簡単
LPデザインの参考になるランディングページまとめサイト10選（日本・海外） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近DMM英会話をしている人のツイキャスを見るのが趣味のうららです。 LIGMOのセブヤンとナッツがツイキャス配信を始めたのですが、上司が苦戦しながら勉強している姿を見るとニヤニヤしますね。コメントでチャチャを入れるのが日課となりつつあります。みなさんもぜひチェックしてみてくださいね。 平日は毎日放送するよ！録画もしてるのでぜひ〜♡ 【平日20:00〜20:30】『TOEIC255点の挑戦 #セブヤン英語』@sebu_yan 【平日20:30〜21:00】『ナッツの #チャライングリッシュ 』 @nuts612 pic.twitter.com/QyVTuwWAvF — さえりぐ (@saeligood) 2015, 6月 25 さて、私は最近とあるランディングページ制作に関わりました。 （ちなみに、ランディングページとは1枚で商品やサービスを訴求するウェブページのことで、「LP」とも言いま
Webサイト制作に使えるおしゃれな無料アイコンサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 Webサイト制作をする上で欠かせないアイコン素材。デザイン性にこだわりたくても、「一からデザインしている時間がない！」という方もいますよね。 そこで今回は、数あるアイコン素材の中から、デザイン性に優れたおしゃれな無料アイコンを厳選してご紹介します。 線で構成されたライン系アイコンやシンプルなフラットデザイン、手書き風のアイコンなどをテーマ別に紹介しているので、これから制作するWebサイトの雰囲気に合わせてご活用ください。 なお、今回は基本的にロイヤリティフリーで使用できるものを集めましたが、ご利用になる際は各配布先にて利用許諾範囲を必ずご確認ください。 ※この記事は、2015年に公開されたものを最新情報を踏まえて編集部で再編成しました。 シンプル・フラットなデザインがおしゃれな無料のラインアイコン Streamline https://www.stre
ロゴをデザインする時に役立つ！便利なオンラインサービス・無料素材のまとめ23選
個人ブログでも企業サイトでも新しいサービスを立ち上げる時に重要なのは、ロゴのデザインです。ロゴの作成は、デザインセンスがある人には簡単な作業でも、デザインが苦手な人にとっては悪夢かもしれません。 ロゴのデザインやカラーやフォントを難しいと感じる人は、ぜひこの記事を参考にしてください。ロゴのデザインにとても役立つ23のサイトをご紹介します。 ロゴ・ジェネレーター（ロゴ作成ツール） カラーを選ぶためのツール ロゴ用の無料アイコンがダウンロードできるサイト ロゴ用の無料フォントがダウンロードできるサイト ロゴのアイデアがもらえる情報源 ロゴ・ジェネレーター（ロゴ作成ツール） ロゴ・ジェネレーターはロゴ作成のための一番簡単な手段です。以下のサイトを使えば手早くロゴが作成できます。無料や低価格で利用できるので費用の節約にもなります。 それでは、一つずつご紹介します！ Logaster 会社名と業種を
HTMLでモックを組み立てるときに便利なウェブサービス＋α | バニデザノート
HTMLでモックを立てたり、仮の情報が多くてもとりあえず組まないといけない状況のときによく使うのだけど、なんだか分類分けがうまくできなくて、いつも検索しちゃう。そんなウェブサービスをまとめました。ちょっと地味目だけど、すごく役に立ってます。
Adobeイラストレーターでワイヤーフレームを効率的に作る方法 | 生産性向上のためのお役立ちブログ｜株式会社プロフェッサ
Adobeイラストレーターでワイヤーフレームを効率的に作る方法 こんにちは！デザイナーのボブです。 今日は、Adobeイラストレーターでワイヤーフレームを効率的に作る方法を紹介したいと思います。 ワイヤーフレームを作るときはだいたいエクセルで作っています。 エクセルで作っておけば、だいだいの人がファイルを開くことができるでしょう。 しかし、エクセルで作っていると印刷した時に文字が消えてしまっているとか、ラインが揃わずイライラなんてこともしばしば・・・ そこでAdobeイラストレーターでワイヤーフレームを作ってみては？とひらめきました。 お客様にデータを確認していただく際にはPDFに書き出せばOK！ PDFもまた大変便利なファイル形式です！ それでは、AIでワイヤーフレームを作ってみましょう。 アートボードの作成 アートボードはファイルを作成するときにもいくつ必要なのか設定ができますがファイ
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
Tumblrサイトの作り方教えます−−企業事例とメリット (1/2)
「Tumblrでサイト作って」そんなオーダーにももう困らない！ 人気Tumblrテーマ「ZEN 2.0」「Apollo」の作者である佐野章核さんが、Tumblrを使ったサイト制作の方法を解説する新連載です。（編集部） 手軽な情報発信ツールとして、数年前から大きな話題になっているWebサービス「Tumblr（タンブラー）」。企業にも活用事例は広がっていて、「今度のショップサイトはTumblrで作りたい」なんて話もよく耳にします。しかし、流行っていることはなんとなく知っていても、実際にTumblrを使ったことがない、何ができてどうやるのか分からない……という方も多いのではないでしょうか。 この連載は、そんなWebデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を全5回に分けて解説します。最終的にはTumblrを使ったWebサイトの制作・公開を目標にします。 いまさら聞けない、Tumbl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://recipi.jp/study/2015/08/22/%E5%9C%9F%E6%97%A5%E3%81%A7javascript%E3%82%92%E7%8B%AC%E5%AD%A6%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1%E3%82%AB%E3%83%AA%E3%82%AD%E3%83%A5%E3%83%A9%E3%83%A0/%E2%80%9Chttp://recip
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
新着記事
