サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
2017年6月30日 便利ツール アイデアのメモも、画像も、音声も、とにかくなんでも保存できちゃうメモツール「Evernote」。有名すぎる便利ツールですね!逆に自由度が高すぎてどうやって使えばいいのかわからない、という方も多いと思います。今回は「Webデザイナー」をキーワードに私のEvernoteの使い方を紹介します。 ↑私が10年以上利用している会計ソフト! Evernoteってなあに? Evernoteの機能を簡単に説明します。 画像・音声・PDFファイルなどが保存できる アップロードできる容量は月に無料アカウント:60MB、プレミアムアカウント:1GB プレミアムアカウントは月額5ドルまたは年額45ドル ノートに対して一つだけ設定できるノートブックを大カテゴリとして使用 ノートに対して複数設定できるタグを小カテゴリとして使用 ノートブックもタグも階層化させて整理できる 携帯電話・ス
2012年3月1日からFacebookページにタイムラインが適用されるようになりました。 3月30日には全Facebookページが強制的に新デザインに切り替わるので、 今のうちにデザインを修正して対応しちゃいましょう! 新デザインの変更箇所まとめは、いろんなブログで紹介されているので、 今回は、デザイナー視点での、新デザインへの対応のコツをまとめました。 続きを読む デザインしている中で、パスを合体したり分割したり パスを変形させることは多いと思います。 変形させるとき、多くの方は「パス」パネルを使用すると思いますが、 アイコンだけ並んでいても、どれがどんな働きをするのかわからなくなることはありませんか? アイコンの絵でなんとなく合体する…くりぬかれる…と、動きは予想できますが どちらのパスが前面・背面にあるかで、またさらに形が変わってきます。 今回はそんなちょっと迷う「パス」パネル、 F
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ(見つけやすさ)を改善するものとなります。 また、ランディングページ(検索などから訪れた最初のページ)にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。 制作過程みたいなものを書いてみたいと思います。 ロケットスタートに全力投球を誓った、けんすうさんからのご依頼 ある日、ロケットスタートの社長、けんすうこと古川健介さん(以下、けんすうさん)から :HOWTOサイトをつくりたいからデザインを依頼したい! ということで早速じっくりとお話を伺うことにしました。 ベンチャーだからこそできる!?合宿的制作スタイル 以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。 それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。 宿泊こそ伴わないものの、合宿に似たようなスタイルです。 長い時
正規表現といえば、主にsedやawkといったUNIXのコマンドで、あるいはPerlやPHP、JavaScriptなどのスクリプト言語の中などで、プログラマーが文字列を操作するために使う道具でした。 その正規表現がHTML5でサポートされる見通しです。いままで正規表現を使わずに済んでいたデザイナやコーダーといった職種の方々も、いずれ仕事としてきちんと正規表現を扱わなければならない時代がやってきます。 HTML5のどこに正規表現が使えるようになるの? 正規表現は、input要素のpattern属性の中で使えることになる予定です。W3Cが2009年8月25日付け公開しているHTML5のワーキングドラフトの「4.10 Forms」の「4.10.4.2.8 The pattern attribute」では次のように記載されています。 The pattern attribute specifies a
今回は,Webサイト構築プロジェクトのワークフローを俯瞰してみたいと思います。実際にクライアントから声がかかる場面から納品,つまり開発案件の完了までを12の「ステージ」に分けて図解してみました。思考のプロセス/人的配置/タスク/ツールなども一緒に記しています。少し大きな図になってしまいましたが,ご参考になれば。 図は,一番上は「4つのステップ/3つのタスク/12の要素(第62回 持続可能なWebサイト開発を支える12の要素)」。その下は,人的配置をロール(役割)ごとに記述しています。その下は,大まかなタスクのレベルです。それぞれの期間内に処理すべき項目を列挙しています。その下が,「ステージ」。プロジェクト全体を12のステージに分類して作業内容を整理しています。基本的には,その流れの順で進んでいきます。その下は,それぞれのステージのアウトプットのイメージで,更にその下にはよく使うファイルアイ
Movable Type検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 1.はじめに MTで再構築するファイルの拡張子を".php"にして、そのページの中で頻繁に更新される部分を、 <?php include('foo.html'); ?> で読み込むことで、ページ全体の再構築不要で情報を更新することができます。 ただ、検索結果ページはPerlのCGIで動作するため、PHPの方法を利用することができません。 ということで、検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 2.検索結果画面のMTIncludeタグでファイルを読み込む 1項のfoo.phpのパスを、仮に「/var/www/html/foo.html」とします。 このファイルを検索結果画面のMTIncludeタグで読み込むには、下記の手順が必要です。 まず、mt-config
2017年02月10日 Adobe Preview CC/ リアルタイムでスマホ画面をpreviewしながらデザイン作業できるアプリ このアプリはとても優秀ですので、スマホサイトやスマホアプリのデザイン制作している人は絶対に使ったほうがいいです。なんと、リアルタイムでphotoshopの画面がスマホでプレビューできるのです。しかも、保存した時だけ反映されるのではなく、リアルタイムでPHOTOSHOP上でボタン色を変更していたら、スマホ画面でも同じように色が変わります。 パソコンでスマホのデザイン見るよりも、スマホの画面で見るほうが絶対に感覚が同じなので、最高に使いやすいです。photoshop側でデバイスプレビューパネルを開いておけば、wi-fiで同期できます。USBのケーブルで繋いでおけば、特にパネルとか開かなくてもスマホ画面に表示されます。複数のデバイスに繋いでも表示可能ですが、なんだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く