Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ）
iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チートシートを印刷してすぐに見られるようにしておくと便利ですよね。 チートシートの目次 iOS デザイン チートシート Swift チートシート Android チートシート Android デザイン チートシート Twitter Bootstrap 3 チートシート Foundation チートシート WordPress 時短用チートシート WordPress テーマ開発用チートシート GitとGit
広告用バナー、こうやって考えてつくってリサイズしてます（実演付） ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
こんにちは、デザイナーのかわさきです。 マウントレーニア（カフェラッテ）の美味しい季節になってきました（個人的に）。ちなみに「コーヒー豆2倍」が売りのダブルシリーズはレッドブル並みに目が覚めるので、眠たい時におすすめです。 さて本題です。 マグネッツでは普段お仕事にて広告用のバナーもよくご依頼いただき、制作しているのですが、今回は受注からデザイン制作・サイズパターン制作までの流れを、実例をつくりながら解説してみようと思います。 目次 まずは着手前に確認！ 出稿先を確認 バナーの必要サイズ・規定を確認 誘導先のページを確認 納期の確認 バナーに掲載する情報やデザインテイストを確認 では、架空のバナーで実演してみます 前提条件を改めて確認 それでは、早速作っていきます！ リサイズしていきます 終わりに まずは着手前に確認！ 出稿先を確認 掲載する媒体やメディア（PC向け/スマーホフォン向けなど
僕がWebサイトリニューアル提案時にやっている事とやらない事 - よつば手帖
ありがたいことにWebサイトのリニューアル話なんてのを良くいただきます。 ずっとお付き合いしてる代理店さんからの依頼もあったり、知人からの紹介もあったり。 安いところにお願いしたらどうしようもなくなって助けてほしいなんて事もあります。 そんな話の時にやってる事とやらない事があります。 ※主に中小企業などにむけての場合の話です。大企業や官公庁だとやり方は変わります。 1.数値は信じすぎない 2.批判は簡単だけどやらない 3.現状（リニューアル前）のWebサイトを読む 4.否定は何も生まないのでやらない 5.サイトを読む力を鍛えて基礎力をあげておく 1.数値は信じすぎない Webサイトのリニューアル提案をいただいた場合などに、現状サイトの分析をして提案します。 僕の場合はガッチガチの数値分析中心だけでは無く、全体の印象や構成なども含めて分析します。 全部数値に頼っていくと「誰にでもいい顔をする
これは助かる！Web制作を円滑に進めるために役立つ資料テンプレート
クライアントとの更新やりとりを10倍楽にする（か... / 【無料配布】Web制作における書類一式、そしてド... / WEBサイト制作前やデザイン制作時に欠かせないヒ...他...全5件
Webページ制作はパズル。そしてこれからWebサイトやブログを作りたい人、学びたい人におすすめ入門サイト、ドットインストールに感動。＊リンあれ
MacのちiPhone、iPad、iOSデベロッパーなデザイナー兼イラストレーターのまったりApple的イラスト雑記帳 引っ越してからのリンあれは「最近、専門的なことが出てきてわかんない、もっと簡単なのおねがいします」と言われることが出てきました。専門的…？ 引っ越し前のリンあれにはなくて、引っ越し後のリンあれにあるネタ…というと、Web関連のエントリですかね…(^∀^;) うーん、MacとかWindowsとかiPhoneとか…こんぴーたーに関しては素人だもんなぁ。そうか〜。そゆのなら誰でも読めるのかぁ〜。 と思いつつも、特にWeb関連のエキスパートと言えるほどでもないのでそんなに難しい事書いたかなぁ…(;╹⌓╹)？よくわかんない、ユコびん（@yucovin）です。こんにちは。 今日は、こうしてブログをやっているとたまに尋ねられることについてのお話と、その回答のエントリです。Web関連の話
Goodpatchのデザイナーが仕事で使っているデスクトップアプリ・Webサービス・手書きツールまとめ | Goodpatch Blog
みなさんはお仕事をされているときに、どのようなツールを用いて作業をしているでしょうか。 何かいいものがないかと探している方、まず何を使ったらいいのかわからないという方など、様々な方がいるかと思います。 先日Goodpatchのメンバーページ(⇒ABOUT)ができたので、今回は、Goodpatchのデザイナーに仕事でどのようなツールやアプリを使っているのか、またなぜ使っているかという理由を聞いてみました。 これらがみなさんの参考になれば嬉しいです！ UIデザイナー(小林幸弘さん) コバさんは、新しいツールやサービスが出たときにはとりあえず新規登録してみて、インタラクションであったり、見た目であったりを確認するようにしているそうです。その中でUIが細かいところまで考えられているものや、個人的に好きな見た目だったら使い続けるのだとか。 4コマノート、Notepod アプリ、スマートフォンサイトの
photoshopでのウェブデザインの勘どころ | バニデザノート
Photoshopで複数ページのカンプデザインを展開するとき、ファイルは一括にするのか、それとも１ページごとに作成するのか、その際共通オブジェクトをどう扱うかといったデータ・ファイル管理についてまとめてみました。また、Photoshopでのウェブデザインの際に便利そうなツールや「やり方」も合わせて考えてみました。
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
Web系フリーランスをモンスタークライアントから守る契約書【テンプレートあり】
契約書なしの口約束でお仕事を受けてませんか？ 自分はまだ駆け出しのフリーランスだから…… クライアントへ契約の手間を与えてしまうから遠慮しちゃう…… 契約とか法律とかよくわからないから…… などなど、理由は様々あるのかもしれません。 でも、契約書なしで案件を受けていると必ずいつかトラブルが起きますよ。 例えば、代金以上の労働を求められたり、お金を払わず逃げられたり。 ボクも12年間、ウェブ制作業に関わってきてますが、残念なことにこうした契約に関わるトラブルをいろいろと経験しました。 確かに、契約書を自分で作るのは難しいです。行政書士へ契約書の作成を依頼するとかなりお金がかかります。 でも、契約書がたった１枚あるだけで、クライアントと友好的な関係を長く築けるのも事実です。 この記事のタイトルには「モンスタークライアントから守る」と書きました。 実際は、契約書は制作を受ける側のあなただけを守る
【実案件で使える？】Photoshop CS6のプラグイン「Cut&Slice me」を使ってみる | DevelopersIO
僕はWebデザインをするときPhotoshopを使う人なんですが、Photoshopのスライスはあまり便利ではありません。 そこで最近このプラグイン「Cut&Slice me」を実験的に使っています。 今後長期的に使えるかはわかりませんが、1ヶ月ほど使ってみて便利だなと思ったのでサンプル作成と合わせて紹介します。 このプラグインの利用にはPhotoshop CS6が必要です。 Cut&Slice meプラグインでできること Cut&Slice meはPhotoshopのスライスを使わずに、レイヤー名に処理用の宣言を行いそれにそって自動書き出しが行われます。 Photoshopのスライスを使わず一括書き出し レイヤー名に宣言をつけることで書き出しを制御 レイヤー名を画像の名前にできる 他のレイヤーに影響されずに書き出せる 切り出し領域をシェイプで制御 ボタンの状態ごとに書き出し PC、And
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
Web制作時に地味に役立ちそうな様々なツールを一纏めにしてOSS化したツールセット・Effin Toolset
JavaScriptのコード整形や難読化、 リソースのリンク集などなど、Web 制作に地味に役立ちそうなツール を一纏めにしてOSSとして無償配布 しているツール郡、Effin Toolset のご紹介です。役に立つかどうか は個人差もあるでしょうけど・・ データスキームURI変換ツールやJSコードの整形、難読化ツールなどなど様々なツールが一纏めにされてGithubで無償公開されています。 便利そうなものからネタ的なものまでツールいろいろ。 dataurl ↑ 画像をドラッグ&ドロップしてdataスキームURIに変換するやつ Escaper ↑ CSSのcontentプロパティで特殊文字等を使う際にUnicode エスケープシーケンス形式に変換するツール jjencoder ↑ 難読化ツール などなど他にもいろいろ（ネタツール的なものも含めて）あり、githubで一括DLできるようになって
スマートフォンサイトの表示確認に使いたい便利なツール×2
[対象: 中級] 今日は、スマートフォン向けのサイトを検証するときに便利なツールを2つ紹介します。 レスポンシブ・ウェブデザインでの表示を簡単に確かめられるブックマークレットとスマホでのページ閲覧をシミュレーションするアプリケーションソフトです。 1. レスポンシブ・ウェブデザイン ブックマークレット 1つ目はレスポンシブ・ウェブデザインがどのように機能しているかをチェックするブックマークレットです。 こちらのページにアクセスして「RWD Bookmarklet」というボタン（リンク）をブラウザのお気に入りに追加するか、ブックマークバーにドラッグ&ドロップします。 レスポンシブ・ウェブデザインを確かめたいページでブラウザに追加したそのリンクをクリックすると下のような画面になります。 中央上にある赤枠で囲んだ4つのアイコンをクリックすると解像度を変化させた表示に切り替えることができます。 ア
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
株式会社ガイアックスの公式サイト › ガイアックスオフィシャルサイト
HTML5/CSS3で作られたウェブパーツを集めた「HTML5＆CSS3 Snippets」
