PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。 そもそもExtract機能とは？ Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて
【必読】あなたのサイトはどれくらい嫌われてる？スマホユーザーが嫌う10のこと
＜質問＞ スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか？ ＜回答＞ 文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはＷＥＢを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う１０個のことを紹介します。 ① リンク箇所が一目で判らないと嫌われる スマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大
見積の参考になるフリーランスのWebサイト制作の料金表まとめ 2014年 – 請求書作成サービス「Misoca(ミソカ)」
フリーランスのWebデザイナーの方が公開しているWebサイト制作の料金表を20件以上調べてまとめました。見積作成時の参考にしてみてください。 ※掲載価格は目安であり内容や納期、その他の理由により変動することがあります ※掲載価格は調査時のものであり、変動する可能性があります とその前に、 見積書や請求書など「経理書類の作成が大変！」という方は、ミスなくカンタンに見積書や請求書が作れる「Misoca」がおすすめです！ぜひお試しください↓ [adrotate group=”2″] Web制作・Webデザインの料金項目の説明 Webデザインの料金は大きく分けて「デザイン」か「コーディングも含む」かによって変わってきます。 デザインの場合は「素材等の制作」や「写真の有無」が必要なのかなどの点、コーディングを含む場合は「サーバー」や「データベース」などによって変わってきます。 下記のページでそれぞれ
レストラン等、飲食店Webサイトの制作Tipsと実例まとめ
2016年6月9日 Webデザイン レストラン、居酒屋、カフェ、バーなどなど、国内だけでも数えきれないほどの飲食店が存在します。そのため、飲食店のWebサイト制作を経験したことのある、またはこれから制作予定のデザイナーさんも多いのではないでしょうか？そこで今回は特にレストランにスポットをあてて、必要な要素や制作ポイントを考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ おいしそうな写真が命！ ユーザーがお店に入る前にチェックしておきたいのは、そのお店でどんな体験ができるのか？という事。どんな料理が出てくるんだろう？一皿頼んだらどれくらいの量なんだろう？お店の雰囲気は？などなど…。これらの不安を解消してくれるのがクオリティの高い写真です。最近ではファーストビューで画面いっぱいの写真を背景画像としてドドーンと表示しているサイトもよく見かけますね。 鉄板焼きの可らしでは写真では
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
海外で人気のWebサイト制作ツール、Salon.ioとGoodpatchのローカライゼーション | Goodpatch Blog
Goodpatchがローカライズに取り組んだ、Salon.ioという海外で人気のサービスの日本語版がリリースされました！Salon.ioとは、コードを書かずにドラッグ＆ドロップだけで、自由にWebサイトを作ることができるツールです。今回の記事では、Salon.ioのサービス紹介と、ローカライズの経験から見えてきたことについてお話します！ Salon.ioって？ http://salon.io/ Salon.ioはドイツ・ベルリンにて2012年11月にローンチされました。コードを書かずにドラッグ&ドロップだけで、美しいWebサイトやポートフォリオを作成することができることから、世界中のクリエイターから愛されています。Salon.ioを使ってできることについて説明します。 画像 ブラウザ上にドラッグ＆ドロップするだけで、画像をアップロードすることができます。ドラッグして自由な位置に動かすことが
続・よくある3つのデザインから考える、マークアップの最適解
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
ピクトグラムアイコンの検索に便利な「IconsDB」:phpspot開発日誌
Icons DB - free custom icons ピクトグラムアイコンの検索に便利な「IconsDB」 フリーのピクトグラムアイコンを探してICO,PNG,GIF,JPG等でダウンロードが可能。 cloudで検索してみた例。目的の物を簡単に発見出来ます 関連エントリ ソーシャルサイトのピクトグラムアイコン112個セット WEBサイト制作に使えるベクターアイコンセットｘ２５ スマホ用のアプリアイコンのりサイズを一発で作成できる「Makeappicon」 ゲームに使えそうな960種類以上のアイコンセット「Game icons」 手書き風だけどリアルなソーシャルメディアアイコンセット１５ Windows8風デザインのソーシャルアイコン９６個セット「Simple Icons」 分かりやすいフリーのスマホ用ジェスチャーアイコン12種類
ここ一年くらいで参考になったデザイン/webデザインに関するスライド10
スライドはズルい スライドってズルいですよね！ｗ web制作においてはコンテンツを閲覧させる障壁とも言われるクリックを150回とか強いるのに、こんなにも読ませるコンテンツ！！すごい！ズルい！ たまに思うんですが、私の長文もスライド形式にしてしまえば読んでもらいやすいんじゃない？とか考えます。フリーのwebデザイナーのたえさん(@ken_c_lo)も同じこと考えてたみたいでひじょーに嬉しかったですｗ なんかそのうちブログをスライド化して見られるプラグインでないかなー、もしくは作ってみようかなと思っている今日この頃です。 webデザインに関するスライドまとめ 本題です。世間的には少ないと言われているwebデザインにおける「デザイン」にフォーカスを当てたスライドで私がブクマしていたものを集めてみました。 タイトル的にうん？と思うものもありますが、全て考え方等を含めデザインを考えることについて参考
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Web制作の見積金額・相場観を知りたい時に参考になる記事まとめ