さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ

学生時代バイトで個人指導の塾講師をやっていて、座ってられない＆話が聞けない中2とか、アルファベットのaとdとbの区別が付いてなくてbog とかdopple とか平気で書いちゃう中3とかを担当していた。 そういうレベルの子供でも、ちょっとした一言というかきっかけが見つかれば変わるし、偏差値27から50超のだいたい普通レベルまでもってくことは、片手間の個人指導の大学生バイトでも割と難しくなかった。 逆に私にとっては、普通の子を出来る子にする方が簡単じゃなかった。本人に勉強への自発的意欲があって家庭の協力があれば偏差値60超くらいまではいけたけど、そこから先は元々の素養がないとダメかなぁという感じだった。個人的な体感だと65を超えるのは元々の素養が大きく左右するなぁと思っていた。 アホの子を普通の子にする役目は、他のバイト講師仲間の誰もがやりたがらなかった。私はアホだったからそっちのが性に合って

Mads SoegaardはInteraction Design Foundationの共同設立者および編集長です。 デザイナーの皆さんをびっくりさせるような、非常に大事なツールを紹介しようと思います。そのツールは、音符と音符の間の静けさと同じくらい過小評価されています。ところが、そのツールにはユーザーをページ上にとどめる力があります。 多くの要素によって、インタラクティブデザインのレイアウトと構造は形づくられます。そして無視されがちですが、もっとも不可欠な要素の１つにホワイトスペース（またはネガティブスペース）があります。ホワイトスペースは、ほかのデザイン要素の中やその周りにあります。 Webサイトやアプリの場合、さまざまなビジュアル要素がレイアウトを構成します。ビジュアル要素には、タイポグラフィや境界線、アイコン、画像などが含まれます。絵を想像してみてください。これらのパーツはペイント

こんにちは（・∀・） 以前【Labs】レスポンシブデザインのブレークポイントは！？でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って... という投稿をしましたが、 全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。 今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。細かくと言っても今回作ったブレークポイントはたったの10個です。 あ、やっぱりちょっと多いですか⁉️ でもご安心ください。メジャーブレークポイントは1つです。 それでは最初にサンプルをご覧ください。ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。 Result サンプルデモはこちら モバイルファーストでCSSの記述していきます。@mediaで囲われていない

Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実

こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

今は和風デザイナーとしてホームページを中心に制作している私ですが、元々は旅行パンフレット制作会社の編集・ライターでした。 WEB業界に入って苦労したことは、上司からは『ダサい』クライアントからは『何か違う』と言われ続ける日々が続きました。 そんな日々から抜け出した様々な気付きを紹介していきます。 使うツールが違うDTPとWEBデザインではツールの使用方法やツールそのものが違ったりします。なので、WEBデザインを始める際にはどのツールをどういうタイミングで使うか整理する必要があります。 【DTP使用ツール例】 InDesign＆Illustrator：レイアウト Photoshop：写真加工と補正 Illustrator：素材作成 【WEBデザイン使用ツール例】 Photoshop：レイアウトと写真加工補正 Illustrator：ロゴやイラスト作成 ※元々印刷会社でWEBを始めた会社ではレ

ここ数年のWebデザインのトレンドとしてすっかり定着した「ミニマリズム」。2018年はそろそろ次のトレンドが訪れるのでしょうか？ 変化の兆しは少しずつ現れているようです。 ミニマリズムはWebデザインにおいてとても人気のデザイン手法ですが、近年のトレンドを見ていると、「オリジナリティ」がより重要な要素になりつつあるように感じられます。 オリジナリティの溢れるデザインというのは、サイトに訪れる人に愛着をもってもらい、ブランディングにも大きな役割を果たします。 今回は、ミニマリズムとオリジナリティに関するWebデザインの動向と、ミニマリズムの後に注目されるデザインについてご紹介したいと思います。 ミニマリズムとは ミニマリズムとは、ミニマルデザインなどとも呼ばれ、デザインから余計な要素を取り除くことによってシンプルで分かりやすく、洗練されたデザインに仕上げるデザイン手法のことを言います。 「L

今、裁量労働制が話題になっている。 僕はアップルでずっとこの裁量労働制で働いてきたので、ちょっとこの制度について思うことをいくつか書いてみたい。 「裁量労働制」ってなに？ 裁量労働制というのは具体的にどういうことかというと、実際の労働時間が１日４時間だろうが16時間だろうが、あらかじめ取り決めた時間だけ働いたものとみなす、一種の「みなし労働時間制度」だ。まあ、固定年俸制と考えてもいい。 欧米諸国では広く普及している制度で、時間で成果を測るのにあまり適していない専門職などは、大抵この形で賃金が支払われている。デザイナーとかエンジニアとかをイメージするとわかりやすいかもしれない。新米のエンジニアが100時間費やして書いたコードでも、ベテランがやれば10時間でより優れたものができてしまうことは少なくない。それなら時間に対しではなく、成果に対して賃金を払ったほうが理に叶っているというわけだ。 なお

小室哲哉さんが、週刊文春に不倫疑惑を報じられたのを契機に、引退を発表した。「高次脳機能障害」を抱える妻・KEIKOさんの介護に疲れ不倫に走ったと報じられた、などの憶測が飛び交っている。 そんななか、高次脳機能障害の当事者であり、発達障害の妻との18年に渡る家庭再生の記録を『されど愛しきお妻様～「大人の発達障害」の妻と「脳が壊れた」僕の18年間』にまとめた文筆業の鈴木大介さんが、一連の報道についてどう思ったか、その所感を綴った。 「事実と違う」と言うだけでは足りなかった思い 頂点を極めたアーティストとは、公人なのかもしれないが、それにしてもどれほどの苦しさを押し殺してあの場に挑んだのだろう。小室哲哉さんが不倫疑惑報道を受けて行った記者会見は、同時に引退会見になった。質疑を除いても50分以上に及んだ会見を見ながら、何度か涙を抑えきれなくなった。 『週刊文春』の報道については、ただ「事実とは違う

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

コーディング　Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi

こんにちは。ヨッピーです。「楽天」が創業から20周年を迎えるそうです。 僕がインターネットをやりはじめた頃、「楽天」という名前を最初に見た時は「うさんくさい名前の会社だな」と思ったような記憶がありますが、今では球団を持つまでになり、日本を代表する会社に成長したわけで、なんかすみません。 20年といえば、人間でいうところの成人を迎えるタイミングであり、オギャアと産まれた子供がもうお酒を飲めるような年齢になるわけで、実にめでたい。 ちなみに「20周年」といえば他にも、 ・伝説のエロゲ「To Heart」の発売 ・「Ultima Online」のサービス開始 ・「ポケモン」のアニメ放送開始 ・漫画「ONE PIECE」連載開始 なんかが該当します。ONE PIECEってスタートからもう20年も経つのか……！ ちょっと時間が経つのが早すぎるな。 そんなわけで「それどこ」の担当者から「20周年にちな

2015年の春、母がアルツハイマー病を発症したという事実は、徐々に母の親戚や交友関係に広がっていった。経路は主に電話だった。 この時期、母はまだ電話の応対ができたが、それでも「様子がおかしい」と気が付く人もいる。そんな人は、私が電話に出ると「最近どうなさったのでしょうか」と聞いてくる。 それとは別に「このところ水泳に来ていませんがどうなさいましたか」「もうずいぶんとコーラスのサークルにいらっしゃっていませんけれど、具合でも悪いのでしょうか」といった電話もある。最初のうちは、適当にごまかしていたが、やがてごまかすわけにはいかなくなった。 「実は認知症を発症しまして……」 と説明すると、大抵は息を呑み、「お大事になさってください」という言葉と共に電話を終えることになる。中にはお見舞いを送ってきてくれる人もある。それは大変ありがたいことなのだが、どうにも対応に困るものもあった。 「これを飲んでみ

Search, watch, and cook every single Tasty recipe and video ever - all in one place! News, Politics, Culture, Life, Entertainment, and more. Stories that matter to you.

【交換日記はじめまして】 すっごく久しぶりのブログ投稿です。 「アウトプットしたいよ～」とか言いながら全くブログを書いていなかったみやしたんくです。 最近ふとFacebookで元会社の先輩toksatoさんが｢日報をたくさん書いているでゲス｣という趣旨の投稿をしていまして、かるーい気持ちで 「日報公開してくださいよw」 「いやできねえわw」 「じゃあぼくも日報いっぱい書いているんで交換日記やりましょう」 「それいいね」 ってことになり交換日記をすることにしました。 ぼくはWeb製作会社、いわゆる「そとのひと」として、 toksatoさんは事業者側のWeb担当、いわゆる「なかのひと」として、 色々意見交換できたらおもしろいんでないかね！というプロジェクトです。 （あとはぼくがアウトプットするための後押し） toksatoさんとは ブログに良いことをたくさん書いております。勉強になります。 t

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

産業医科大学医学部医学科卒業。専門は産業医学実務。産業医実務研修センター、ジョンソン・エンド・ジョンソン統括産業医を経て、現在医療法人社団同友会 春日クリニック 産業保健部門 産業医 。現在日系大手企業、外資系企業、ベンチャー企業、独立行政法人など約30社の産業医業務に従事 「電波がバリ3」のハイパフォーマーは疲れなくても当然 ー長時間労働問題がしきりに取り沙汰されています。大室さんはどのように感じていらっしゃいますか。 バブルのころ、「24時間戦えますか」と栄養ドリンクのCMが一世を風靡しましたが、そんなキャッチコピーがコンプライアンスを通った時代だったということですよね。ほんの30年前でさえそうだったのですから、時代の移り変わりによって常識が変わっていくことが示唆されているということです。 今、私たちは当たり前のように満員電車に揺られ、終電間際に帰宅していますが、その常識は30年後の人