タグ

Webに関するmahotokiのブックマーク (127)

  • The Basic Idea of Symmetrical Design

    2014年1月28日 Webデザイン デザインをする上でシンメトリー(対称性)は頻繁に使われる手法のひとつです。古代から様々な場面で使われてきた美の構図、シンメトリーをうまく取り入れることで、安定感のあるレイアウトを生み出すことができます。今回はこのシンメトリーに焦点をあて、具体例とともに構成方法を考えてみようと思います! ↑私が10年以上利用している会計ソフト! シンメトリー(対称性)とは シンメトリーは広く「左右対称・反転」として知られていますが、他にも「回転」や「平行移動」、「拡大・縮小」も含んおり、これらの手法を取り入れた構成のことを言います。シンメトリーには規則性があり、バランスのよい安定した調和を感じさせます。シンプルで一度法則を覚えたら様々なデザインに取り入れられるので、デザイン初心者な方でも比較的容易にまとまったレイアウトを構成することができます。 シンメトリーとは異なる、

    The Basic Idea of Symmetrical Design
  • フラットデザインの参考にも!Bootstrap3対応のかっこよすぎる無料テーマまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    Bootstrap3の無料テーマ&テーマ集まとめ BlackTie.co http://www.blacktie.co/ 最近衝撃を受けたフリーのテーマ集。どのテーマもかっこよすぎて涙が出ます……ありがたや……ネーミングとロゴもかわいくてきゅんとしますね。 テーマ数は現在(2015年6月時点)25個あり、今後の追加も楽しみですね。 Bootswatch http://bootswatch.com/ こちらもテーマ集です。Bootstrap2の頃からありましたが、3にも対応したようです。フラットデザインにするなら「Flatly」がおすすめ。 Start Bootstrap http://startbootstrap.com/ こちらもテーマ集。管理画面用やポートフォリオ用など、いろいろな用途別に作られているのがありがたいですね(「Sponsored」のタグがついたものは有料なのでご注意!)。

    フラットデザインの参考にも!Bootstrap3対応のかっこよすぎる無料テーマまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    mahotoki
    mahotoki 2014/01/28
    フラットデザイン。
  • [取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。 - YoheiM .NET

    [取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。 こんにちは、@yoheiMuneです。 フロントエンドとしてHTML,CSS,JSを中心と開発を行うことを仕事にして早くも半年が経ちました。 最近はだいぶ効率的にコーディングが出来てきたとやっと実感してきたので、ブログにも自分のコーディングスピードアップのコツを書きたいと思います! 「こんなのよりももっと良いのあるよ」などたくさんの感じる点があるかと思います。ぜひTwitterなどで教えて頂けると助かります。 コーディングをスピードアップする6つ+αのポイント 自分が思うにコーディングをスピードアップする最も大切なポイントは以下ではないかと思います。 めんどくさいと感じること、そして改善に動くこと 幸い自分はかなりのめんどくさがり屋で、コーディング中も「これ手動!?」「マウ

    [取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。 - YoheiM .NET
  • sichoru.net

    sichoru.net このドメインを購入する。 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

    sichoru.net
  • Waza: 残念な仕事術

    こんにちは。シリコンバレーのEdSurge社でデザイナーをやっている@chibicodeと申します。このページをはじめて公開した2014年1月26日に26歳になりました。ブログもやっています。 こちらでは自分の仕事術や情報収集術を掲載しています。随時更新中ですが、更新をお知らせする予定はありません。いちおう、このページのソースコードと更新履歴はGitHubで公開しています。 なぜ書いたのか そもそもこのページを設置した理由はふたつあります。 ひとつめは、近ごろ自分の仕事の出来なさぶりに幻滅しており、自分の仕事術や情報収集術を振り返っているうちに、それがどれだけ残念なものなのか、文字に落としこんで振り返りたいと思ったからです。もちろん、仕事術の良し悪しが仕事の成果に与える影響は大したことないのですけどね。 ふたつめは、日の方に「どういうツールを使ってらっしゃるのですか」「どこで情報収集をさ

    Waza: 残念な仕事術
  • HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと

    HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う! 🐰 [S

    HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
  • 文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン

    研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演(アウトリーチ活動)の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者(研究仲間や審査員、一般市民)へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく

  • css3buttongenerator.com

    Settings + Font / Text text: font-family: font-color: font-size: text-shadow: x: y: blur: + Box box-shadow: x: y: blur: padding: padding-top: padding-right: padding-bottom: padding-left: + Border border-radius: border: border-style: border-width: More + Background background: gradient solid start color: end color: color: + Hover background: gradient solid start color: end color: color: Button prev

    mahotoki
    mahotoki 2014/01/24
    CSSのデザインが簡単にできちゃうツール。
  • 1年生デザイナーの1週間/その90 村田 智さん(はてな) - MdN Design Interactive

    デザイナーという職業に憧れる読者のみなさんに先駆けて、一足早くデザイナーになった先輩デザイナーの1週間を追いかける、このコーナー。月曜、リリース直前の準備中の巻。 今月の1年生デザイナー 村田 智さん(はてな) 〔プロフィール〕 むらた・さとし●埼玉県出身の23歳。物心ついたときには、家にワープロもパソコンもあった村田さんは、中学生の頃からテキストベースのWebサイトをつくるようになる。そのWebサイトがきっかけで、高校2年の頃から約5年ほどWeb周りのグラフィック制作やデザイン・コーディングの仕事をすることに。作業は全部自宅で行い、打ち合わせが必要なときのみ出かけて行くというスタイルで、学校とはまったく別の経験を積んできた。また、Webサイトの情報収集のために屋に通ううちに、さらにエディトリアルデザインに興味を持つようにもなる。高校時代は美術部で油絵を描くかたわら、生徒会で文化祭のポス

    1年生デザイナーの1週間/その90 村田 智さん(はてな) - MdN Design Interactive
  • MdN Design|総合情報サイト

    第16回(最終回) 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 (公開日:2010年4月16日 解説:こもりまさあき) 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2(CSS 2)をサポートしているものがほとんどです(特定のプロパティだけ未サポートも含め)。その一方、現在CSSの次のバージョンにあたるCSSレベル3(CSS

    MdN Design|総合情報サイト
  • 誰のため?何のため?Webサイトを作り始める前に。 | Webクリエイターボックス

    2020年8月4日 Webサイト制作 こんにちは!ついにWebクリエイターボックスのサイトが完成しました!これからこのサイトと、制作者のManaをよろしくお願いします!さて、さっそくですが最初の記事、Webサイトを作る前にすること。突然Photoshopを立ち上げてデザインを始めても、ユーザーが必要とするWebサイトが出来上がる可能性は極めて低いと思います。デザインやコーディングを始める前に、「このWebサイトは何のために作るのか」「誰がどのようにこのサイトを使うのか」をまとめておきましょう! ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その1 目標:Webサイトを作る目的を明確にする 必要なもの:紙とペン 対象レベル:超初心者OK! 目次 誰のため?何のため?Webサイトを作り始める前に。 ←今ここ Webサイトの構成図を簡単に作れる便利ツール Webサイ

    誰のため?何のため?Webサイトを作り始める前に。 | Webクリエイターボックス
    mahotoki
    mahotoki 2014/01/24
    これはとても役に立つよ!
  • 優れたユーザーインタフェース(UI)を実現するチェックリスト36項目

    【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく! 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない

    優れたユーザーインタフェース(UI)を実現するチェックリスト36項目
  • ホームページビルダーを無料でお探しなら>ホームページ作成ツール19個

    1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない><」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか? HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる 【発表】最新のHP作成方法はこちらへ ホームページビルダーを無料でお探しのあなた。 ホームページビルダーといえば、これ↓ 「ジャストシステムのホームページビルダー」なら、こちらですぐにダウンロードできます。 しかし、焦らずちょっと待ってください。 web制作歴14年目の僕は、ジャストシステムのホームページビルダーをおすすめしません。 なぜなら、このJustSystemホームページビルダーには以下のようなデメリットがあるからです。 ダウンロードしてからインストールするのが面倒 レンタルサーバーも必要。そ

    ホームページビルダーを無料でお探しなら>ホームページ作成ツール19個
    mahotoki
    mahotoki 2014/01/23
    Web作成無料ツール。
  • イマドキCSS設計

    イマドキCSS設計 NTTレゾナント 森恭平 ※矢印キーで動かせます About Me 森恭平 ディレクター フロントエンドエンジニア Twitter:basara669 今日のスライド http://basara669.com/slides/140122/index.html ※今日のatndやconnpassにも載っています 今日のハッシュタグ #gooOTT Agenda なぜCSS設計が必要なのか BEMとSMACSSの紹介 実際の運用上どうするべきか 題に入る前に・・・ 様々なCSS設計がありますが、どれも複数クラスを前提としているので、IE6以下では使えないです。。

    イマドキCSS設計
    mahotoki
    mahotoki 2014/01/23
    イマドキのCSS。
  • 国内注目のWebサービスを支える言語・フレームワーク・アーキテクチャ一覧【2013年版】 | Find Job! Startup

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    国内注目のWebサービスを支える言語・フレームワーク・アーキテクチャ一覧【2013年版】 | Find Job! Startup
    mahotoki
    mahotoki 2014/01/22
    各Webサービスのアーキテクチャってなに?
  • Cacoo(カクー)|かんたんにキレイに図が描けるオンライン作図ツール

    Cacoo(カクー)は、クラウドベースのビジュアルコラボレーションツール。チームやプロジェクト関係者のアイデアや作業進捗を、全てオンラインで簡単に共有、簡単に一元管理が可能。 Cacooなら、シンプルな操作性で直感的に使える。フローチャート、ワイヤーフレーム、AWS構成図、組織図など豊富なテンプレートや機能を使って、誰でも簡単に分かりやすいコミュニケーションを。

    Cacoo(カクー)|かんたんにキレイに図が描けるオンライン作図ツール
    mahotoki
    mahotoki 2014/01/22
    Webで図の作成ができちゃう!
  • ウェブサービスの管理画面を作る上で守るべき6つのルール | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは!! メディア事業部のまさしです。 昨今、ウェブサイトをはじめとするウェブサービスやアプリなどは、作っておしまいではなく、作ってから運用し改修を続けて成長させていくことを前提とするようになりました。 その際に重要な役割となる管理画面ですが、管理画面って作るときに何のデータを出していいのか、どうデザインしたらいいのか迷いますよね。結果、あらゆる機能とあらゆるデータを盛り込んだ管理画面になってしまいがちです。 今回は、そんな悩みを解消できるように、目的に合っている使い勝手の良い管理画面をつくるための6つのルールをご紹介いたします。 ウェブサービスの管理画面をつくる上で守るべき6つのルール ルール1:ターゲットは1つに絞るべし! 最も効果的な管理画面とは、単一のユーザーをターゲットとして、その目的をもとに固有のデータを表示しているものです。 複数のユーザーをターゲットとしてしまうと、い

    ウェブサービスの管理画面を作る上で守るべき6つのルール | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ

    数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ(特に画像)、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ

    mahotoki
    mahotoki 2014/01/21
    2014年のWeb業界トレンド。
  • はてなブログのデザインの変え方についての覚え書き。 - 5日と20日は歌詞と遊ぼう。

    注意:この記事はもう古いです。 いまわたしはBlankというテーマをカスタマイズして使っています。それに際しては作者さまのブログが参考になりますのでご覧ください! moonnote.hateblo.jp (2016/04/03) こんにちは! 先日はてなブログにお引っ越ししてきました。こちらでもよろしくお願いします。 引っ越してきたときにはありもののテーマのデザインにしていたのですが、先日デザインを(若干)オリジナルのものに刷新しました。やったぁ! ということで、今回はそれに関する覚え書きを記します。「5日と20日は歌詞と遊ぼう」というタイトルのブログですが、今回歌詞は読みませんごめんなさい。 おことわり: 私はWeb関係のデザインにはまったく詳しくありません。 体系的に学びたい方は、他のサイトか書物をどうぞ。 http://lunasaurus.hatenablog.com/entry/

  • はてなやクックパッドの開発現場で、CIやテストはどう行われているのか?(前編)。CROSS 2014 - Publickey

    Web技術について横断的に語り合うイベント「CROSS 2014」が1月17日、都内で行われました。 そのセッションの1つ「現場に聞く!テスト/CI/DevOps、実際のところどうなの」では、フリーランスエンジニアの伊藤直也氏がセッションオーナーとして司会を担当し、クックパッドで開発まわりのエンジニアをしている舘野祐一氏、はてなでアプリケーションエンジニアをしている伏井洋平氏、KAIZEN platform Inc.の石橋利真氏らがスピーカーとして登壇。 先進的な現場でテストやCIがどのように行われ、エンジニアのチームがどのように情報共有をしているか、音で語るという注目すべき内容でした。記事ではそのダイジェストを紹介しましょう。 現場に聞く!テスト/CI/DevOps、実際のところどうなの 伊藤 今日のテーマとしてはCI(Continuous Integration、継続的インテグレー

    はてなやクックパッドの開発現場で、CIやテストはどう行われているのか?(前編)。CROSS 2014 - Publickey