色覚の多様性に配慮した�案内・サイン・図表等用の 配色セット「カラーユニバーサルデザイン推奨配色セット (第二版)」について。 ここで例示されている色見本は、 高齢や色覚などが原因で色の判別が難しくなっている方にも 理解しやすい配色となっているらしい。 暫定ならが RGB 版の色コードが追加されたので更新。 サイトデザインの参考にしたい。 個人的な利便性の点からここにメモ。 ▼アクセントカラー 基本色 ……小面積の文字・記号等、高彩度な色。 赤
メールが届くと同時に何らかのアクションを起こすプログラムというのは、かなり作る機会の多い部類に入るかと思います。 ここ数年で特に多いものだと、ケータイ向けサイトの案件で、空メールを受信したら自動でユーザー登録用のフォームのアドレスを書いたメールを、空メール送信者に送る、みたいなものとか、ブログやSNSの日記なんかを、ケータイメールで投稿できるようにする処理とかですね。 そして王道の自動返信メールとか。 後、途中で飽きちゃったんですが、昔、送られてくるメールの内容を自分で学習して言葉を覚えて、文章を生成して返信する bot (人工無脳)を趣味で作ってたことがあります。 で、実際こういう「メールを受け取ったら何らかの処理を自動で行なう」という機能を実現するには、どうすれば良いかというと、 特定のメールアカウントにメールが届いた際に、何らかのプログラムが起動するように設定する そのプログラムを書
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
今やインターネット上のあらゆるところで用いられている画像形式「JPEG」ですが、GoogleがJPEGに代わる新たな画像フォーマットとして「WebP」を発表しました。 ファイルサイズが小さく、ウェブの表示を高速化することが可能となっており、実際に「どの程度の画質でどの程度のファイルサイズになるのか」といったギャラリーも公開されています。 詳細は以下から。 Chromium Blog: WebP, a new image format for the Web Googleの公式ブログによると、同社はウェブの表示をさらに高速化するために行ってきた取り組みの一環として、ウェブページに用いられている「画像」に目を付けたそうです。 画像はウェブページのデータ量のうち約65%を占めており、特にモバイル回線のような通信速度が限られた環境においてはウェブ表示のパフォーマンスを著しく低下させるとのこと。 そ
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
以下記事から影響を受けて、自分なりに書いてみようかと。 人気ブロガーになるための30の方法 上記の記事から、私が感じた感想として、ちょっとこれは私とは違うという部分から、「じゃぁ私はどういう風にブログに対して考えているのかなぁ」と考え始めてしまったのがきっかけ。 特に「人を楽しませることで、自分も楽しむ」これは私とは正反対。 私はとにかく、「自分が」「楽になりそうなツール」「楽しめるもの」「自分なりの感想」という自分本位で、自分が楽しめなければブログは意味がないという考えを持っている。 これらを踏まえ、いろいろと考えてみました。 人気ブロガーになるための5つの方法の前に 多くのブロガーから、私のブログは人気ブログのひとつというお言葉を頂き、有頂天になるなどの調子の良い男が私ですが、実際この「人気ブログ」っていうのは非常にあいまいな言葉だったりします。 たとえば、私の地元で、私のブログを知っ
初心者Webアプリケーション開発者がチェックすべき情報源を集めてみた。他に追加した方が良い情報源があった場合はご指摘いただけると助かります。 @ikepyonさんのご指摘により「LASDEC ウェブ健康診断」を追記した。 はてなブックマークの関連リンクによさそうな情報源があったので追記しました。それから、カテゴリを作りました。 ■Webサイト構築 安全なウェブサイトの作り方 http://www.ipa.go.jp/security/vuln/websecurity.html 安全なウェブサイトの作り方(全92ページ、2.09MB) セキュリティ実装 チェックリスト(Excel形式、33KB) 安全なSQLの呼び出し方(全40ページ、714KB) ■Webアプリケーション開発 セキュア・プログラミング講座 http://www.ipa.go.jp/security/awareness/ve
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ(Safari)のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左:角丸と外側にシャドウ、右:角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
ベクターデータを探すならココ!ベクターデータ配信サイトをまとめたダウンロードサイト32選「32 Places to Find High-Quality Vectors」 制作の現場では一般的なベクターデータ形式。拡大縮小が自由自在で、色の変化なども自由にでき、汎用性が効くデータ形式として広くデザインには利用されています。今回紹介するのはそんなベクターデータで制作された素材データをダウンロードできるサイトを集めたエントリー「32 Places to Find High-Quality Vectors」を紹介したいと思います。 Vector RSS どのサイトも数多くのベクターがデータが無料でダウンロードすることができます。今日はまとめられているベクターデータサイトの中から、今までDesigndevelopで紹介したことが無いサイトを中心にいくつかピックアップして紹介したいと思います。 詳しく
なんとなくグラデーションを使用したり、困ったらグラデーションを使用したり、トレンドだからグラデーションを使用したりしていませんか? グラデーションを使用しないでデザインする方法をBuild Internet!から紹介します。また、グラデーションをより効果的に必然として使用するためのエントリーでもあります。 多くのウェブデザインのブログで周期的にページデザインのPhotoshopのチュートリアルを紹介しています。これらは素晴らしいウェブページを作成するためにグラデーションベースのデザインが一般的であるというおかしな印象を与えてしまいました。こういった記事を書く我々は間違って解釈されてしまう記事を書いたという罪があります。 ウェブデザインはデザイントレンドがどれだけ含まれているかのチェックリストではありません。何を使用するにしても、何をやめて何をアレンジするか学ぶ必要があります。 WeFunc
CartagenはHTML5/JavaScriptを使ったオープンソース・ソフトウェア。HTML5は今年の秋には正式版が発表され、普及が進められていくだろう。既存のサイトをリプレイスするまでのコストがかけられるのは特定のサイトに限られるかも知れないが、今後リリースされるサイトは対応するケースが多くなるはずだ。 HTML5を使ったマップ HTML5によって何ができるのか分かれば、より取り組みが具体的になるだろう。よく言われるのは動画再生を行うvideoタグやローカルストレージなどだが、そうした技術を組み合わせればCartagenのような面白い見せ方もできるようになる。 CartagenはまるでGoogleマップのようにHTML5を使って地図を描き出す。もちろんマウスでドラッグして移動させることができる。画像として出力する機能もある。ズームイン/アウトはできないが、設定レベルでは調整可能だ。
通常のアクセス解析はある程度時間が経過してからでないとその結果がわからないため、「まさに今!このページがヒットしている!」というのがわかりにくいのですが、この「Woopra」というアクセス解析サービスはとんでもないリアルタイム性がウリとなっており、誰かが訪問しに来たら即座にわかるようになっています。 リアルタイムアクセス解析を最大限活用するため、ブラウザ経由での利用だけでなく、Javaをベースとして作られたWindows・Mac・Linux対応の専用ソフトがあり、来訪者にタグ付けして個別に追跡、IPアドレスなどあらゆる条件で絞り込めるクイックフィルタ、誰がどこから来たのかすぐにわかるマップ、特定の条件のユーザーが来たらポップアップしたり音を鳴らして知らせてくれる機能などなどを搭載。そのすべてがリアルタイムに刻一刻と変化して最新の情報を教えてくれます。Google Analyticsで実現し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く