ページのTOPへ戻るボタン、要らないのでは？
ページのTOP（先頭）に戻るボタンは、ページ最下部とかにあるのはまだ許せるが、画面内に固定表示するのは要らない。なんだふわっと出すって、それ要らないから。制作現場でよく出た話だが、もはや現場では付けるとなっても誰も口にしない（こんな細かいとこ話すのも面倒だから）。なぜ無くならないのか本当に不思議です。 2023.04追記 テック系のサイトは当然「ページのTOPへ戻る」を画面内に表示してないよな？と確認してみた。どのサイトを見るか考えるのは面倒なので、このブログ構築でお世話になったもののサイトと、今をときめくOpenAIのサイトも確認した。 さくらインターネットopen_in_new Ubuntuopen_in_new NGINXopen_in_new Let's Encryptopen_in_new MySQLopen_in_new Node.jsopen_in_new Strapiope
サルワカ | サルでも分かる図解説明マガジン
レゴランドの水遊びはどれがおすすめ？ウォータメイズとスプラッシュパッドはどっち？ 2024/06/17
ミニマルリズムでいこう！参考にしたい実践的な使い方25個まとめ
ここ数年よく耳にするようになった「ミニマリズム（英: Minimalism）」という言葉ですが、一体これが何なのか、そしてどのように活用できるのでしょう。 ミニマリズムは、必要最小限までデザインを省略し、本当に必要なものに注目を集める表現スタイルです。このことからミニマリズムでは、デザインの目的や意図を伝えやすくします。 ミニマルはシンプルに見えますが、作品の完成には練習や制作時間を要するもの。今回は、ミニマルスタイルの具体的な使い方を参考例と一緒に見ていきます。 コンテンツ目次 1. 一貫性をもたせよう。 2. 隠されたメッセージを探そう。 3. 空間のつながりを楽しもう。 4. かしこくいこう。 5. 効率的にいこう。 6. グリッドを利用しよう。 7. 実用、機能性を考えよう。 8. バランスよくしてみよう。 9. ルールを破ってみよう。 10. 文字で遊ぼう。 11. 余白スペース
ついつい見続けてしまう！シネマグラフを取り入れたWebデザイン24選
シネマグラフ（Cinemagraphs）という手法をご存知でしょうか。シネマグラフとは、画像の一部にだけ動きを取り入れたGIFアニメーションのことです。GIFアニメーションを使ったホームページは以前からありましたが、最近では少し変わった形で使われています。 今回は、シネマグラフを活用したオシャレなサイトと画像をまとめてご紹介します。 GIF画像を使用するため、作り方や技術自体の難易度は高くありませんし、やる気次第では、ソフトを使って自分で作ることも可能ですので、ぜひチェックしましょう。 動くシネマグラフを使ったサイト、画像まとめ 株式会社 電通クリエーティブＸ http://www.dentsu-crx.co.jp/ 株式会社電通クリエーティブＸのホームページでは、社員や文具が永遠と回るシネマグラフをデザインに取り入れています。 トップページをはじめ、企業紹介から社員紹介、リクルートページ
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]
お気に入りのWebサイトを紹介したいと思います。職場が変わった、パソコンが変わった時にいちいち探すのも少し面倒なのでブログに残しておきたいと思います。 とても勉強になるサイトばかりなのでチェックしてみてはいかがでしょうか？ タグリファレンス HTMLクイックリファレンス 目的別にHTMLやCSSのタグを探すことができる。ど忘れした時に調度良い感じがします。 TAG index HTMLやCSSのタグについてまとめられている。HTML5のタグも追加された。 HTMLやCSSを学び始めた頃から参考にさせてもらっているサイトです。タグの具体的な内容が書かれているので手軽に調べることができます。 デザインリンク Web Design Clip 業種やカラーでWebサイトを探すことができます。 Responsive Web Design JP レスポンシブデザインのサイトデザインを紹介してい
![Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/01048eb6998fe7ef9afe223729d1cc1d814f7e10/height=288;version=1;width=512/http%3A%2F%2Fwww.cocoblo.jp%2Fblog%2Fwp-content%2Fuploads%2F2014%2F12%2Fresponsive-jp.jpg)
FICC | デジタルエージェンシー
LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。 消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。
レイアウトとは？プロも使う原則やコツ・テクニックまとめ | LISKUL
１－１．コントラストコントラストは、明確な視覚的差異を用いて重要な要素を強調します。色のコントラストは最も一般的な形で、強い色対比を使うことで特定の情報やアクションを際立たせます。 サイズや形状のコントラストも同様に重要で、大きな要素や異なる形状は視覚的に目立つため、キャンペーンのキャッチフレーズやウェブサイトのボタンに使用されます。 １－２．整列整列は要素を一列に配置し、整った見た目を作り出します。テキスト、画像、ボタンなどが整然と並べられることで、全体のデザインが統一され、情報が追いやすくなります。 整列は、ユーザーインターフェースやグラフィックデザインにおいて、読みやすさとナビゲーションの改善に貢献します。 １－３．繰り返し繰り返しは、デザイン内で一貫性と認識を高めるために同様の要素を使用します。これにより、ブランドアイデンティティを強化し、ユーザーに親しみやすさを提供します。 繰り
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法｜MarTechLab（マーテックラボ）
LPO研究所の鳥居です。 「イメージしてたデザインと全然違う」 「これじゃ売れる気がしないんだけど」 「ちゃんと頭使って考えてんの？」 突然ですが、あなたは日常的にこんなことを言われていませんか？ 今の職場でWebデザイナーとして働きはじめてはや７年。私は、今では後輩デザイナーの育成も行う立場なのですが、新人が先程のようなセリフを言われるのを毎日のように目にしています。 無論、私自身も新人の頃はこっぴどくやられました。 今なら分かることですが、これは 新人Webデザイナーが共通して「取るべきコミュニケーション」を取っていないから起こるトラブル なのです。 あなたは今、デザイン制作におけるコミュニケーションに自信を持てていますか？ もしかすると今この記事を読んでいるあなたは「Webデザイナー」ではなく、クライアントから要望を聞く「営業」や「ディレクター」の立場かもしれません。 しかし基本は同
各SNSのレイアウトガイドラインをまとめたインフォグラフィックス
Tweetカナダにあるデジタルマーケティングのエージェンシー、tent socialのブログで役に立ちそうなインフォグラフィックスを見つけました。 FacebookやTwitter、Google+などメジャーなSNSのレイアウトデザインをわかりやすくまとめてくれています。 このインフォグラフィックスを見れば使用されている画像サイズ、テキストの分量が一目瞭然です。サイトやアプリのUIを考える際にも参考になりそうです。 元ネタは以下の記事より。 The Ridiculously Exhaustive Social Media Dimensions Blueprint [INFOGRAPHIC] サイトに貼り付けてもいいよーというコードがあったので、まるっとインフォグラフィックスを見れるようにしました。ご参考ください。 Please include attribution to jeffbere
Shunter.jp - 楽天のトップページを内容を変えずに、外観だけ変えてどれだけ見やすくなるか試してみました。
フルサイズ 変更前 まえがき なんで楽天？？ すみません、何かのご縁だと思いますが、セミナーを受けていたら調度思いついた感じです。 先日データサイエンスの始め方・データ分析のデザインパターンというセミナーに参加してきました。 その中で一番私の印象に残ったのが、最後のプレゼンテーションで「楽天」のサイトのデザインについてでした。 内容は簡単に言うと、『「おもてなし」をしましょう。そのためにユーザの感情をデータからモデル化することを目指す！』という話だったと認識しています。 「おもてなし」という考え方は、とても共感しました。ユーザにとっていい物をという思想は常に持っていたい所存です。 当該プレゼンテーションの中では、ホテルのバスタオルの再利用を促すための張り紙を１つの例として扱い 、ユーザとの接し方を変える事でユーザの行動が大きく変わる事をこのことを説明されていました。 この話での、具体的な比
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tondemodesign.com
Web制作の参考になる！サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ | コリス
Webサイトのデザインで「かっこよく！」「インパクトを！」としか言わないWeb担当者よ、本来の目的に立ち返れ | 生田昌弘の「Web担当者に喝！」
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
ウェブデザイナーにお勧め！フォントやタイポグラフィの知識・テクニックを学ぶまとめ | コリス