クライアントとの更新やりとりを10倍楽にする(か... / 【無料配布】Web制作における書類一式、そしてド... / WEBサイト制作前やデザイン制作時に欠かせないヒ...他...全5件
クライアントとの更新やりとりを10倍楽にする(か... / 【無料配布】Web制作における書類一式、そしてド... / WEBサイト制作前やデザイン制作時に欠かせないヒ...他...全5件
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
なるべく口にしないようにしていますが、正直言って僕はかなりの頻度で”メンドクサイ”と思うことが多いです。何か面倒な作業が目の前に立ち塞がったら、とにかく”メンドクサイ”と思うように心がけています。 というのも、僕にとって”メンドクサイ”という言葉は口にしたらアウトですが、思う分には誰にも咎められることはありません。おまけに、その瞬間僕が“メンドクサイ”と感じたことは、解消できれば僕の作業効率は絶対に上がることを意味しているから、別に誰になんと言われても僕にとっての“メンドクサイ”は良い言葉です。 大事なのは”メンドクサイ”で終わらせないこと。”メンドクサイから解消しなきゃ!”で口癖(思い癖?)にできれば一番でしょうか? というわけで、今日は僕自身が「あー、もうほにゃにゃらら(メンドクサっ)!!」と思った時に、そのメンドクサイを解消してきたサービスやツールなど、遭遇したシチュエーションにも分
2011年のWeb制作トレンドをはてブのホットエントリから振り返ってみました。 2011年でトレンドは、スマートフォン向けサイトやアプリの制作関連、HTML5関連、あとはFacebook対応のためのノウハウといった感じでした。 はてなブックマーク「コンピュータ・IT」カテゴリ内で、1500以上ブクマがついた記事を選出、その中からさらに私の主観も入りつつ、2011年Web制作系のエントリーの中でもベストな31記事をピックアップ、Webデザイン系、SEO系、HTML+CSS系、プログラミング系、スマートフォンサイト制作系、企画、ツール、その他系、素材系にそれぞれ分類しました。 Webデザイン系 1. 色彩センスのいらない配色講座 配色と色についてひじょーに分かりやすく、論理的に解説されたスライド。はてブ数ダントツ。 2. デザインの基礎力をワンランクアップしたい私(Webデザイナー
ウェブサイトやちょっとしたワンポイントに使える高品質なアイコン集が「ArtDesigner.lv」にて公開されています。それぞれアイコンセットはCCライセンスで配布されており、ライセンスの範疇であれば無料で利用することができます。商用利用もOKなので、助かる人は多いはず。 Lovely Website icons Pack#1 | Artdesigner.lv 中身はこのような8種類のアイコンがPNGで収録されています。 Lovely Website icons Pack#2 | Artdesigner.lv こちらも中身は8種類のPNGファイル WEB UI Treasure Chest v 1.0 | Artdesigner.lv 種類が多彩で、しかもPSDファイルで提供されています。文字などはレイヤーで重ねられているので、ほかの文字に変えたい場合にも簡単に編集することができます。 S
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー(colorプロパティ)にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか?ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
最近ではすっかりおなじみになりつつあるHTML5。ブラウザの問題もあり、まだ広くは利用されていませんが、徐々にその範囲を拡大しつつあります。今日紹介するのはHTML5でコーディングするときに役立つ10のオンラインツールをまとめたエントリー「10 online tools to simplify HTML5 coding」です。 Initializr 様々なHTML5コーディングに役立つWEBサービス、チートシートなどが集められていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 HTML5 Demos and Examples HTML5の独自機能のDemoを試せるサイトIE、firefox、opera、safari、Chromeとそれぞれのブラウザの対応状況をチェックできます。 HTML5 Canvas Cheat Sheet – Nih
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
web制作で使えるWebサービスや、Webツールなどをご紹介。 小分けして紹介していた分もあわせてまとめています。定番の物からマニアックなものまでお楽しみください。 グラフィック・創作 10,000s Cool FREE Seamless Patterns-パターンファイルジェネレータ Web制作でもよく背景で利用するパターンファイルを作成する素晴らしいジェネレータ。様々な模様があり、色は決めれますので、組み合わせはほぼ無限です。 Pixlr Photo Editor-オンラインフォトエディタ 世界で最も人気とされるオンラインフォトエディタ。OSを選ばない。 photoshopに近いインターフェイスと、ブラウザさえあれば動くという使用が人気。ユーザー登録しなくても利用できる(したほうが便利)。 Vintage Effect-レトロ、ヴィンテージエフェクト 上のPixlr.comが運営するも
HTML5 旋風、吹き荒れてますね!(^0^)/ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました! 株式会社カヤック(本社:神奈川県鎌倉市、 代表取締役CEO:柳澤大輔、http://www.kayac.com以下「カヤック」)は、HTML+CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課(MEはMarkup Engineerの略)に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や
ご質問頂いたので記事にします。クオリティ の高いWordPressのテーマで無料のものは 無いか、または無料で手に入る方法は無い か、とのことでしたのでなかなかクオリティの 高いテーマを無料で配布してくれているサイト をいくつかご紹介します。 というわけで無料で手に入る、有料ライクなWordPressテーマを配布しているサイトのまとめ。ハイクオリティかどうかは個人差があるかなとは思います。 デザインはもちろん、テーマの機能をどういったコードで実装しているか、というのも参考になりますので開発目的に見ておいても損は無いかなと。 dessign swiss-missやonextrapixelでも評価されたデザイナー、クリエイター向けのテーマ。ホワイトベース中心です。有料版もありますが、無料版も見劣りしません。 example dessign Templatic TemplaticはCMSやポート
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5=難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。 xhtmlではブロックレベル要素とインライン要素という分類に分
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く