IDEA * IDEAドットインストール代表のライフハックブログ
とあるフリーランスWebデザイナーの一日
2017年7月14日 フリーランス, 便利ツール フリーランスとして働いている人は、なかなか他の人の働き方を知る機会がないのではないでしょうか？どんな風に時間管理してるんだろう？どんなツールを使ってるんだろう？などなど、気になるけど、聞くまでもないかな…なんて…。最近そのような、フリーランスの働き方についての質問メールをいくつか頂いたので、フリーランスのWebデザイナーである私の一日を追ってみました（自分で）。いつも業務に使っているWebサービスや便利なツールも紹介しています。ほとんどが無料サービスなので必見ですよ！ ↑私が10年以上利用している会計ソフト！ 5:30 起床 朝は早いです。逆立ちをして（！）目を覚まします。逆立ちなんて相当集中していないとできないので、一気に目が覚めます。 その後Macを開いてメールチェック。メールクライアントはMac付属のMail。すぐ返信するもの、後で返
Macユーザの私がWeb制作を行う上で使用しているアプリ・ツール・サービス・ブックマークレットなどのまとめ
昨年より、5年間やっていたDTPの部署からWeb制作の担当と相成った私。 正直、まだまだお勉強中のWeb制作なのですが、ちょいとここいらで今自分が使用しているアプリ・ツール・サービスなどをまとめておこうと思います。 デザインに使用しているアプリ まずはデザインに使用しているアプリ。 Adobe Photoshop・Illustrator デザインに使用しているのはAdobeのPhotoshopとIllustrator。（CS5） DTPのころから使っているので非常に慣れているのはいいのですが、おかげさまで新しい環境に飛び込む勇気がなく、いつか覚えようと思っているFireworksに手を出す時間がございません。 まぁそのうち…うん…。 どんな風にIllustratorやPhotoshopを使用しているのかは、以下の記事をごらんくだしあ。 これが出来れば中級者！Illustrator初心者のた
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法 2013.06.14 | 初心者向け | 覚えておきたい 先週、某iPhoneアプリをリリースした際に公式サイトを担当したネイビーです。 iPhoneアプリだから公式サイトはiPhoneで見れればいい！というわけではないんですね。知りませんでした。だったらレスポンシブで！と行きたいものの、ニョーンと伸び縮みするスタイルが万人受けするものでもありません。 iPhone向けとPC向けのページを作ってユーザーエージェントで振り分ける方針が決まりつつ、いつどこで判別したらよいものか？リリース前日まで悩んでしまいました。 PHPによる判別 スマホ向けとPC向けのコンテンツを振り分ける際にまず思いつくのは、サーバ側のプログラムでユーザーエージェントを判別して処理を分岐する方法です。端末によってコンテンツの種類や量を調節したり
あなたのサイトやブログのランディングページを見つけてPVを増やす方法｜ユーザーフローの便利な使い方
Analyticsを利用したサイト改善案シリーズ第２回です。 まず、ランディングページ自体、ブログにあまり必要ないと考えられていますが、実はそうではありません。 ブログも記事を書けば書くほど多くのランディングページが生まれているのですが、それらを単に無視しているだけであり、気付くことが出来れば、それなりに対処することが出来るのです。 ランディングページとは？ Web制作やマーケティングに関わっていない、一般的なブロガーさんであれば、なんですかそれは？という言葉かもしれません。 簡単にいうと、制作したサービスや商品につなげるために、入り口的ページです。 多くの場合、広告をクリックした時の、最初のページに用いられます。 なぜなら、せっかく広告をクリックしてくれたにもかかわらず、興味を持ってもらえなければ、直ぐに離脱されてしまいます。そこで、ユーザーの興味を強く引くための、協力な入り口専用ページ
レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
なぜ日本のWebデザインはダサいのか？ | Goodpatch Blog
こんにちは！ みなさんQuoraというサイトをご存知ですか？QuoraはFacebookの元CTO（最高技術責任者）が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。（日本だとYahoo知恵袋が似ているWebサービス） 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。（記事ネタQuestion :Why is web design so bad for Japanese websites?） 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし
タブレット向けサイトの文字サイズは16pxがいいとの調査結果……イマドキの文字サイズの話 | 初代編集長ブログ―安田英久
今日は、タブレット端末でユーザーが好むWebサイトの調査結果を紹介しながら、昨今のユーザーがWebサイトを見るのに使っているデバイスにどう対応するかを少しだけ考えてみます。 タブレット端末で使いやすいサイトとは？「タブレット端末でのサイトユーザビリティ調査」というレポートを、IMJさんが発表していました。 ・ IMJ調査レポート「タブレット端末でのサイトユーザビリティ調査」 → http://www.imjp.co.jp/press/release/20130515_000959.html （リリース） → http://www.imjp.co.jp/press/assets/201305/imj20130515.pdf （調査データPDF） ざっくりその内容をまとめると、こんな感じです。 7インチタブレットユーザーの最大34％はスマートフォンサイトを支持 （でも大半がPC向け表示を支持）
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Froont – responsive web design tool
Design in the browser Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them online right away. All you need is a web browser. Deliver faster Publish responsive pages with your own domain name or export your work to host it yourself. FROONT is great for decision making, prototyping and publishing single page websites. A vi
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
Basic Logo Design Process
2013年3月25日 Webデザイン 企業のイメージを明確にすることを「ブランディング」と呼びます。企業ロゴはそのブランディングが色濃く反映され、企業のイメージを左右する重要な部分です。今回は「ロゴとはなんぞや？」というところから、私のロゴを実例に、ロゴの制作手順を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ 先日「ロゴデザインする時の参考に！ロゴデザインギャラリーのオンパレードと注目記事色々！」という記事内で、なるほどな、と頷ける文章に出会いました。 WEBサイトは、エンドユーザーに伝わらないデザインだとわかればリニューアルするけど、ロゴデザインはエンドユーザーに伝わらないからと言って作り変えることは殆ど無い。それはつまり、ロゴはお客様の為に作るんじゃないと、ロゴは自分たちの意思や考えの象徴でもあるからそんなに簡単に変えるわけにはいかない、自分たち（ロゴに込められた物
Webデザイナー 検索・登録／フリーランスWebデザイナーHP集
北海道 (7) 青森 (4) 秋田 (3) 岩手 (1) 山形 (6) 宮城 (5) 福島 (5) 茨城 (1) 群馬 (4) 栃木 (2) 埼玉 (9) 東京 (50) 千葉 (10) 神奈川 (26) 山梨 (4) 長野 (3) 静岡 (7) 新潟 (1) 富山 (3) 石川 (5) 福井 (4) 愛知 (9) 岐阜 (5) 三重 (4) 滋賀 (4) 京都 (8) 大阪 (24) 奈良 (2) 和歌山 (3) 兵庫 (15) 徳島 (3) 香川 (2) 愛媛 (7) 高知 (1) 岡山 (3) 広島 (4) 鳥取 (1) 島根 (1) 山口 (2) 福岡 (19) 長崎 (5) 佐賀 (1) 大分 (2) 熊本 (2) 宮崎 (1) 鹿児島 (3) 沖縄 (5)
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
Notepad++とEmmetでサクサクコーディング
以前の記事で紹介したNotepad++、大変便利で私もブログライティングやコーディングのデフォルトエディタとしてありがたく使わせてもらってます。 最新のNotepad++ではデフォルトプラグインでEmmetが入っているらしく（もちろん旧バージョンにあとから入れることもできます）、これはちょっと便利だなぁ、と感じましたのでEmmetの基本あたりを備忘録兼ねて紹介しておきます。 Emmetってなにさ？ Webコーディングに携わってる方はご存知の方が多いかもしれない、Zen-Coding。独自の記法でHTMLやCSSを記述し、それを展開することでコーディングが楽チンになるというものです。 EmmetというのはそのZen-Codingの次期バージョンです。 Zen-Codingの次期バージョン、Emmet について Sergey Chikuyonok氏のGithubを見に行ったら、”Emmet (
Sketch.appで描かれたDribbble投稿作品まとめ10こ | Goodpatch Blog
最近のMEMOPATCHではSketch.appについての記事を続けてアップしているのでSketchに興味を持たれている方もいるのではないでしょうか？ 前回記事: 「Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app」 前々回記事: 「Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ」 Sketchをダウンロードして気になるのが、どんなものを作れるかではないでしょうか。Sketchはまだ新しいアプリですがいくつかのクオリティの高い作品がDribbbleなどのデザイン投稿サイトにあがっています。そこで今回はSketchで描かれたアイコンをご紹介します！ （各リンクはDribbbleの作品ページに飛びます） Mailbox client [.sketch] https://dribbble.com/shots/1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Demonstrating Responsive Design
めしおのアフィリエイト教材レビューブログ
web計。
